Vue 实现el-table多选样式 变为单选效果
我最近在我的 项目开发中遇到一个需要将el-table复选框变单选的需求,同时单选某一行会异步调用接口,请求后台数据;我解决问题之后,觉得还是把这些改进写清楚,方便 Vue的初学者。
·
我最近在我的 项目开发中遇到一个需要将el-table复选框变单选的需求,同时单选某一行会异步调用接口,请求后台数据;我解决问题之后,觉得还是把这些改进写清楚,方便 Vue 的初学者。
问题:(1)调用接口异步,可能会出现慢的接口更新快的接口的数据(解决);
效果图:
1、默认进来的数据
2、选择父类一条后的数据
3、每次切换父类复选框,只能查到对应的数据
代码:
<el-table
ref="multipleTable"
class="el-table-container"
:header-cell-style="{ background: '#dee9fd66' }"
height="260px"
:row-style="{ height: '15px' }"
size="mini"
v-loading="loading"
stripe
border
:data="tabledata"
@selection-change="handleSelectionChange"
@select-all="dialogCheck"
@select="dialogCheck"
>
handleSelectionChange(val) {},
dialogCheck: function (selection, row) {
this.$refs.multipleTable.clearSelection();
if (selection.length === 0) {
this.$refs.householdMember.queryFirstPage('');
return;
}
if (row) {
const obj = JSON.parse(JSON.stringify(row));
this.$refs.householdMember.queryFirstPage(obj.id);
this.$refs.multipleTable.toggleRowSelection(row, true);
}
},
其中: this.$refs.householdMember.queryFirstPage(obj.id);和this.$refs.householdMember.queryFirstPage('');为所调的接口
更多推荐
已为社区贡献2条内容
所有评论(0)