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("保存失败");
  }
}
相关推荐
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
乌夷3 小时前
使用spring boot vue 上传mp4转码为dash并播放
vue.js·spring boot·dash
苹果酱05675 小时前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.5 小时前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding5 小时前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥5 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信5 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
cooldream20095 小时前
深入理解MVP架构:让UI层与业务逻辑完美分离的设计模式
ui·设计模式·架构·系统架构师
拖孩5 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌7 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html