需求:表格的多选框状态根据数据判断,可以勾选和不可以勾选;
<template>
<div class="content-box">
<div class="container">
<h3>多选框显示和隐藏,根据状态可选和不可选</h3>
<el-button @click="clearSelection()">取消选择</el-button>
<el-button @click="showSelection()" v-if="cancelReport">
取消报备
</el-button>
<el-button @click="sureCancel()" v-else>确认取消</el-button>
<div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<transition name="el-fade-in-linear">
<el-table-column
type="selection"
width="55"
v-if="showSelect"
:selectable="selectable"
></el-table-column>
<!-- v-if="showSelect" -->
</transition>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120"
></el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip
></el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄1',
status: 0,
obj: {
status: 0
}
},
{
id: 2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄2',
status: 1,
obj: {
status: 1
}
},
{
id: 3,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄3',
status: 0,
obj: {
status: 0
}
},
{
id: 4,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄4',
status: 1,
obj: {
status: 1
}
},
{
id: 5,
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄5',
status: 0,
obj: {
status: 0
}
},
{
id: 6,
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄6',
status: 1,
obj: {
status: 1
}
},
{
id: 7,
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄7',
status: 0,
obj: {
status: 0
}
}
],
multipleSelection: [],
showSelect: false,
cancelReport: true
}
},
methods: {
showSelection() {
this.showSelect = true
this.cancelReport = false
},
sureCancel() {
if (this.multipleSelection.length == 0) {
return this.$message.error('请先选择需要取消报备的任务')
}
this.showSelect = false
this.cancelReport = true
this.tableData.forEach(element => {
this.multipleSelection.forEach(item => {
if (element.id == item.id) {
element.obj.status = 1
}
})
})
// 清空选项
this.clearSelection()
},
clearSelection() {
this.$refs.multipleTable.clearSelection()
},
handleSelectionChange(val) {
this.multipleSelection = val
},
selectable(row, index) {
// console.log('row=', row, index)
if (row.obj.status == 1) {
return false
} else {
return true
}
}
}
}
</script>
<style lang="scss" scoped>
</style>