el-table拿到取消的选项
时间: 2023-11-16 21:06:41 浏览: 37
根据提供的引用内容,可以使用以下方法来获取el-table中取消的选项:
1. 在el-table中使用@selection-change事件,该事件会在选择项发生变化时触发。可以通过该事件获取到当前选择的所有项和取消的项。
2. 在事件处理程序中,可以使用this.$refs.multipleTable.clearSelection()方法清除之前的选择项,然后使用this.$refs.multipleTable.toggleRowSelection()方法重新选择所有当前选择的项。
3. 可以使用this.$refs.multipleTable.getCheckboxRecords()方法获取当前所有选择的项,然后使用this.tableData.filter()方法过滤出取消的项。
相关问题
el-table获取取消的选项
要获取取消的选项,可以使用element-ui表格组件的@selection-change事件。该事件会在用户选择或取消选择行时触发。在事件处理程序中,可以通过参数selection获取当前已选择的行,通过参数row获取当前操作的行。如果用户取消选择行,则该行将从selection数组中移除。因此,可以通过比较原始的selection数组和当前的selection数组来获取取消的选项。具体实现可以参考以下代码:
```
<template>
<el-table
:data="tableData"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2021-01-01',
name: '张三',
address: '北京市'
},
{
date: '2021-01-02',
name: '李四',
address: '上海市'
},
{
date: '2021-01-03',
name: '王五',
address: '广州市'
}
],
selectedRows: []
}
},
methods: {
handleSelectionChange(selection) {
const removedRows = this.selectedRows.filter(row => !selection.includes(row))
console.log('取消选择的行:', removedRows)
this.selectedRows = selection
}
}
}
</script>
```
el-table展开行取消el-table-coumn的label显示
可以通过设置 `show-header-label` 属性为 `false` 来取消展开行中 `el-table-column` 的 label 显示,示例代码如下:
```html
<el-table :data="tableData" row-key="id">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column label="Operation">
<template slot-scope="scope">
<el-button @click="handleExpand(scope.row)">Expand</el-button>
</template>
</el-table-column>
<el-table-column prop="address" label="Address" show-header-label></el-table-column>
</el-table>
```