参考:https://www.jb51.net/article/257112.htm
<el-table class="elTable" ref="processDataTable" :row-style="rowStyle" :data="processDataList" load = "true" :header-cell-style="headerCellStyle" @select="processSelectChange" @selection-change="handleSelectionChange" @row-click="rowClick" v-loading="listLoading" element-loading-text="加载中"> <el-table-column type="selection" width="55" ></el-table-column> <el-table-column prop="id" label="id" width="80" v-if="1==2"></el-table-column> …… </el-table>
vue:
data:
processSelect:{},//用于表格选择数据集
method():
processSelectChange(selection, row) { // 清除 所有勾选项 this.$refs.processDataTable.clearSelection() // 当表格数据都没有被勾选的时候 就返回 // 主要用于将当前勾选的表格状态清除 if(selection.length == 0) return this.$refs.processDataTable.toggleRowSelection(row, true); }, handleSelectionChange(val) { this.processSelect = val; }, rowClick(row, column) { const selectData = this.processSelect this.$refs.processDataTable.clearSelection() if( selectData.length == 1 ) { selectData.forEach(item => { // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中 if (item == row) { this.$refs.processDataTable.toggleRowSelection(row, false); } // 不然就让当前的一行勾选 else { this.$refs.processDataTable.toggleRowSelection(row, true); } }) } else { this.$refs.processDataTable.toggleRowSelection(row, true); } },
标签:toggleRowSelection,selection,elementui,refs,勾选,单选,table,processDataTable,row From: https://www.cnblogs.com/luo1240465012/p/16937783.html