以下生效的前提是,給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>