el-table 设置单击行时选中当前行的复选框并取消其他复选框的选择

第一步 ：起首要在el-table上对ref属性举行界说，后续用来操纵该table。
第二步：为表格绑定 @row-click="rowClick"变乱。
el-table界说如下：

2. <template>
3. <el-table
4.       :data="tableData"
5.         ref="customTable"
6.          @row-click="rowClick"
7.       style="width: 100%">
8.     <el-table-column
9.       type="selection"
10.       width="55">
11.     </el-table-column>
12.       <el-table-column
13.         prop="date"
14.         label="日期"
15.         width="180">
16.       </el-table-column>
17.       <el-table-column
18.         prop="name"
19.         label="姓名"
20.         width="180">
21.       </el-table-column>
22.       <el-table-column
23.         prop="address"
24.         label="地址">
25.       </el-table-column>
26.     </el-table>
27. </template>

复制代码

第三步： 声明row-click变乱函数rowClick。

3.   <script>
4.     export default {
5.       data() {
6.         return {
7.           tableData: [{
8.             date: '2016-05-02',
9.             name: '王小虎',
10.             address: '上海市普陀区金沙江路 1518 弄'
11.           }, {
12.             date: '2016-05-04',
13.             name: '王小虎',
14.             address: '上海市普陀区金沙江路 1517 弄'
15.           }, {
16.             date: '2016-05-01',
17.             name: '王小虎',
18.             address: '上海市普陀区金沙江路 1519 弄'
19.           }, {
20.             date: '2016-05-03',
21.             name: '王小虎',
22.             address: '上海市普陀区金沙江路 1516 弄'
23.           }]
24.         }
25.       },
26.       methods: {
27.                 rowClick(row) {
28.             // 取消所有的选择状态
29.             this.$refs.persTable.clearSelection()
30.             //为选中的复选框设置选中状态
31.             this.$refs.persTable.toggleRowSelection(row)
32.         }
33.     }
34.   </script>

复制代码