element ui的table多选

使用el-table的selection-change事件来获取选中的值；

例：

html代码：

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变量代码：

javascript 复制代码

// 列表设置显示隐藏
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方法代码：

javascript 复制代码

/**
 * 打开列表设置
 */
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("保存失败");
  }
}