使用el-table的selection-change事件来获取选中的值;
例:
html代码:
<el-button type="primary" @click="openTableSet">列表设置</el-button>
<!-- 列表设置弹框 -->
<el-dialog :close-on-click-modal="false" title="列表设置"
:visible.sync="tableSetShow" append-to-body>
<el-table ref="tableSet" :data="tableSetData" border style="width: 100%"
:cell-style="{ textAlign: 'center' }" header-cell-class-name="table-th"
@selection-change="tableSetMultipleChange" v-if="tableSetShow">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="title" label="标题名称" />
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="tableSetShow = false">取 消</el-button>
<el-button type="primary" @click="editTableSetMultiple">确定</el-button>
</div>
</el-dialog>
js变量代码:
// 列表设置显示隐藏
tableSetShow: false,
// 列表设置数据
tableSetData: [
{ key: "avatar", title: "头像"},
{ key: "nickname", title: "昵称"},
{ key: "name", title: "姓名"},
{ key: "mobile", title: "手机号"},
{ key: "company", title: "公司"},
{ key: "position", title: "职位"},
{ key: "email", title: "邮箱"},
{ key: "subscribe", title: "粉丝状态"},
{ key: "authorized", title: "认证状态"},
{ key: "type", title: "用户分类"},
{ key: "app", title: "应用"},
{ key: "identity", title: "用户身份"},
{ key: "created_at", title: "创建时间"}
],
// 列表设置多选数据
tableSetMultiple: [],
// 列表绑定多选值判断显示隐藏
tableSetMultipleBinding: []
js方法代码:
/**
* 打开列表设置
*/
openTableSet() {
this.tableSetShow = true;
this.getTableSetMultiple();
},
/**
* 列表设置列表多选改变
*/
tableSetMultipleChange(val) {
this.tableSetMultiple = [];
val.forEach(item => {
this.tableSetMultiple.push(item.key);
});
},
/**
* 列表设置获取数据
*/
async getTableSetMultiple() {
let params = {
list_name: "user"
};
let res = await getTableColumnData(params);
if (res.code == 200) {
let data = res.data.json_data;
if (data.length == 0) data = [
"avatar", "nickname", "name", "mobile", "company", "position", "email",
"subscribe", "authorized", "type", "app", "identity", "created_at"
];
this.tableSetMultiple = [];
this.tableSetMultipleBinding = [];
this.$nextTick(() => {
this.tableSetData.forEach(item => {
data.forEach(item2 => {
if (item.key == item2) {
this.tableSetMultiple.push(item.key);
this.tableSetMultipleBinding.push(item.key);
this.$refs.tableSet ? this.$refs.tableSet.toggleRowSelection(item) : "";
};
});
});
});
};
},
/**
* 列表设置保存数据
*/
async editTableSetMultiple() {
if (this.tableSetMultiple.length == 0) {
this.$message.warning("请最少选择一项展示");
return false;
};
let params = {
list_name: "user",
json_data: this.tableSetMultiple
};
let res = await updateTableColumnData(params);
if (res.code == 200) {
this.getTableSetMultiple();
this.tableSetShow = false;
this.$message.success("保存成功");
} else {
this.$message.error("保存失败");
}
}