Element-ui表格默认选中后通过其他操作取消默认选中
官方文档
代码片段
<template>
<div class="page">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 50%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<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>
<el-divider></el-divider>
<el-table
:data="showList"
tooltip-effect="dark"
style="width: 50%">
<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-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="deleteRow(scope.$index, scope.row)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
data () {
return {
showList: [],
tableData: [{
date: '2016-05-03',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎2',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎3',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
handleSelectionChange(val) {
this.showList = val
},
// 移除
deleteRow (index, row) {
this.showList.splice(index, 1)
this.tableData.forEach((item, index) => {
if (item.name === row.name) {
this.$refs.multipleTable.toggleRowSelection(item)
}
})
}
},