element ui的table多选

使用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("保存失败");}
}