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("保存失败");
  }
}
相关推荐
试图让你心动9 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_9 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏9 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85010 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
白玉cfc12 小时前
【iOS】网易云仿写
ui·ios·objective-c
JSON_L14 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊14 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选14 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
小马哥编程16 小时前
如何解决 undetected_chromedriver 启动慢问题
chrome·selenium·ui
Britney⁺♛&?ꪶꪫꪜꫀ18 小时前
Vue2上
vue.js·npm