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("保存失败");
  }
}
相关推荐
清幽竹客30 分钟前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua30 分钟前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb88832 分钟前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
前端fighter9 天前
Vuex 与 Pinia:全面解析现代 Vue 状态管理的进化之路
前端·vue.js·面试
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js
海天胜景9 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui
切韵9 天前
Unity编辑器扩展:UI绑定复制工具
ui·unity·编辑器
萌萌哒草头将军9 天前
什么?React 中可以写 SolidJS 了?SolidJS 官方出手了 🚀🚀🚀
前端·vue.js·react.js
冰茶_9 天前
ASP.NET Core API文档与测试实战指南
后端·学习·http·ui·c#·asp.net