在使用element UI Table表格的多选时,默认是点击复选框才能选中或取消选中,但希望不管点击这一行的哪个位置都能实现这个效果;
// el-table部分代码片段,主要是 @row-click="handle"
<template>
<div>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @row-click="handle"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column prop="date" label="日期" width="120">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
<p v-html="$options.filters.formatDate(1585929599000 )"></p>
</div>
</template>
实现点击任意位置都能选择的方法 handle()
// 代码片段
<script>
export default {
data() {
return {
tableData: [{
date: 1585929599000,
id: 1,
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: 1585929599000,
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
list: []
}
},
methods: {
handle(row, column, event) {
// list -- 已选的数据
let index = this.list.findIndex(item => {
// 判断已选数组中是否已存在该条数据
return item.id == row.id
})
if (index == -1) {
// 如果未存在,设置已选状态,并在list中添加这条数据
this.$refs.multipleTable.toggleRowSelection(row, true); //设置复选框为选中状态
this.list.push(row)
} else {
// 如果已存在,设置未选状态,并在list中删除这条数据
this.$refs.multipleTable.toggleRowSelection(row, false); //设置复选框为未选状态
this.list.splice(index, 1)
}
}
}
}
</script>