前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

1. 效果：如紅框中部分。

一選全選：表頭上的單選框選中則下面每行都選中。

全選一選：表中數據每行都選中時，自動選中表頭中那個單選框。

2. 代碼：

?我的表格是作的萬能表格，所有表頭、表數據都來自參數，此處略。

?對于表格使用及實現方法見博文：VUE : 雙重 for 循環寫法、table 解析任意 list

<template><div><table class="table table-hover"><thead><tr><th><!-- 表頭中的單選框 --><input type="checkbox" id="selectAll"></th><!-- 循環出表頭，用英文的逗號拆分字串 --><th v-for="(item,index) in headerList.split(',')" :key="index">{{item}}</th></tr></thead><tbody><!-- 循環出有多少行數據，即 list 中有多少條數據，得到 list 中的每個元素 --><tr v-for="(item,index) in bodyInfoList" :key="index"><td><!-- 表數據中首列單選框 --><input type="checkbox" class="selectSingle" @click="selectSingle()"></td><!-- 循環取到元素的每個屬性，并展示 --><td v-for="(val,index) in item" :key="index">{{val}}</td></tr></tbody></table></div> </template><script> export default {name: "one",props: {headerList: {type: String, // 亦可接收 Object 類型參數default: "headerList"},bodyInfoList: {type: Array,default: "bodyInfoList"}},methods: {// 全選一選// 此方法不可寫在created、mounted中，會有時無效，// 無效原因: html 還未加載完就已經初始化方法。selectSingle() {if ($(".selectSingle").length == $(".selectSingle:checked").length) {$("#selectAll").prop("checked", true);} else {$("#selectAll").prop("checked", false);}}},created() {},mounted() {// 一選全選$("#selectAll").click(function(e) {// $("#selectAll").on("click", function() { 此寫法和上面一行運行效果一樣$(".selectSingle").prop("checked", this.checked);});} }; </script>

?

總結

以上是生活随笔為你收集整理的VUE：checkbox 单选框（单选、多选）、一选全选 / 全选一选、表格单选列实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。