el-table中全选中和控制选中
el-table中全选中和控制选中
·
el-table中全选中和控制选中
table表格
写一个table表格,加上ref,添加一个el-table-column,设type属性为selection用于选中数据
// 给el-table 添加上ref=""
<el-table
:data="dataList"
border
:row-style="{height:10+'px'}"
:cell-style="{padding:5+'px'}"
ref="mainTable"
v-loading="dataListLoading"
@selection-change="selectionChangeHandle"
style="width: 100%;">
</el-table>
<el-table-column
type="selection"
width="55">
</el-table-column>
toggleAllSelection全选中
获取完数据在后面加上这段代码即可。
this.$ refs.mainTable获取名字为mainTable的组件。
this.$nextTick的作用是在DOM更新之后再执行的,防止table列表为渲染上就改变选中方式而导致无效。
// 获取完数据调用
this.$nextTick(() => {
this.$refs.mainTable.toggleAllSelection()
})
toggleRowSelection控制选中
toggleRowSelection 用于选中表格多行数据,第一个参数是某行数据(可以多行),如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
写对应的方法,这里是官网示例代码,实际应用可加$nextTick
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)