vue3 toggleRowSelection用法 实现表格回显、单选
vue3 toggleRowSelection用法实现表格回显、单选
·
<Table ref="tableRef" :reserve-selection="true" row-key="id" v-loading="loading"
@selection-change="selectChange" :showIndex="false" :data="tableData" :maxHeight="'900'"
@getTableData="getTableData">
<el-table-column type="selection" width="40px" fixed></el-table-column>
<el-table-column prop="ruleName" label="规则模板名称" align="left"/>
</Table>
//回显
const tableRef = ref(null)
const getTableData = () => {
loading.value = true;
querySetRuleInfo(props.channelRulesVisible.data.platformCommodityId) .then((res: any) => {
let data = res.result;
tableData.value = data;
nextTick(() => {
if(tableData.value.length&&props.channelRulesVisible.data)
for (var i = 0; i < tableData.value.length; i++) {
if (props.channelRulesVisible.data.ruleId == tableData.value[i].ruleInfoId) {
tableRef.value.table.toggleRowSelection(tableData.value[i], true)
}
}
});
})
.catch((error) => {
})
.finally(() => {
loading.value = false;
});
};
//单选:
const selectChange = (selection: any) => {
if (Object.keys(selection).length == 1) {
tableData.value = selection[0];
} else {
let del_row = selection.shift();
// 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中)
tableRef.value.table.toggleRowSelection(del_row, false);
tableData.value = selection[0];
}
};
更多推荐
已为社区贡献2条内容
所有评论(0)