本文主要是介绍element ui 多选表格 设置某一行是否可选的方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
1. element ui table组件的网址
2. 设置某一行是否可选的正确方式
3.正确方式的代码和效果展示
1）html代码
2）js代码
3）css代码
4. 错误方式（不可采用，切勿踩坑）
1. element ui table组件的网址
https://element.eleme.cn/#/zh-CN/component/table
2. 设置某一行是否可选的正确方式
使用Table-column Attributes中的selectable属性
3.正确方式的代码和效果展示
为了方便，我修改了element ui 官网中的例子展示一下。
可以把下面的代码粘贴到这个网页（https://codepen.io/pen/）中对应的位置，可以看到效果。
重点：
<el-table-column type="selection :selectable="handleSelection" width="55">
selectable属性的方法，handleSelection默认两个参数，第一个row，第二个index
返回值：true表示可选，false表示不可选。
因此，可以根据row的某些属性或者index来动态设置哪些行是不可选的。
1）html代码
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.10.1/lib/index.js"></script>
<div id="app">
<template><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@selection-change="handleSelectionChange"><el-table-columntype="selection":selectable="handleSelection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnprop="name"label="姓名"width="120"></el-table-column><el-table-columnprop="address"label="地址"show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button><el-button @click="toggleSelection()">取消选择</el-button></div>
</template>
</div>2）js代码
var Main = {data() {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],multipleSelection: []}},methods: {handleSelection (row, index) {if (row.date === '2016-05-04')return falseelsereturn true},toggleSelection(rows) {if (rows) {rows.forEach(row => {this.$refs.multipleTable.toggleRowSelection(row);});} else {this.$refs.multipleTable.clearSelection();}},handleSelectionChange(val) {this.multipleSelection = val;}}}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')3）css代码
@import url("//unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css");
4. 错误方式（不可采用，切勿踩坑）
不要使用table event中的select和select-all。
select 当用户手动勾选数据行的 Checkbox 时触发的事件
select-all 当用户手动勾选全选 Checkbox 时触发的事件
使用这两个事件，不免要搭配table method中的toggleRowSelection。
toggleRowSelection方法会直接改变checkBox选中项数组的长度，因此会导致选中的数据不正确，因此不要采用这种方法。
这篇关于element ui 多选表格 设置某一行是否可选的方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
