以下生效的前提是,给table中的data添加 _disabled属性
通过给 columns 数据设置一项,指定 type: ‘selection’,即可自动开启多选功能。
给 data 项设置特殊 key _checked: true 可以默认选中当前项。
给 data 项设置特殊 key _disabled: true 可以禁止选择当前项。
正确使用好以下事件,可以达到需要的效果:
@on-select,选中某一项触发,返回值为 selection 和 row,分别为已选项和刚选择的项。 @on-select-all,点击全选时触发,返回值为 selection,已选项。 @on-selection-change,只要选中项发生变化时就会触发,返回值为 selection,已选项。
const listData = result.data; //针对返回的数据for循环,来控制前端某行是否可以被选择 for (var i = 0; i < listData.data.length; i++) { if (listData.data[i].auditStatus >1) {//1 是审核中,2是审核通过,3是已驳回 listData.data[i]._disabled = true; } }; <template> <div> <Table border ref="selection" :columns="columns4" :data="data1"></Table> <Button @click="handleSelectAll(true)">Set all selected</Button> <Button @click="handleSelectAll(false)">Cancel all selected</Button> </div> </template> <script> export default { data () { return { columns4: [ { type: 'selection', width: 60, align: 'center' }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' } ], data1: [ { name: 'John Brown', age: 18, address: 'New York No. 1 Lake Park', date: '2016-10-03' }, { name: 'Jim Green', age: 24, address: 'London No. 1 Lake Park', date: '2016-10-01' }, { name: 'Joe Black', age: 30, address: 'Sydney No. 1 Lake Park', date: '2016-10-02' }, { name: 'Jon Snow', age: 26, address: 'Ottawa No. 2 Lake Park', date: '2016-10-04' } ] } }, methods: { handleSelectAll (status) { this.$refs.selection.selectAll(status); } } } </script>