vue element ＜el-table＞实现分页多选_vue eltable分页多选-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38990668/article/details/134259351

文章介绍了如何在Vue项目中使用ElementUI构建一个带有分页和多选功能的数据表格，包括表格列选择、弹窗操作和数据提交接口的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据需确保弹窗已打开

<el-table
      stripe border
      ref="multipleTable"
      :data="setList" //表格数据
      tooltip-effect="dark"
      style="width: 100%"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange">
>
<el-table-column
	  type="selection"
	  :reserve-selection="true" //为true时可以夸分页多选
	  width="55">
</el-table-column>
</el-table>
<pagination //分页组件
     :total="total"
     :page.sync="listQuery.page"
     :limit.sync="listQuery.limit"
      @pagination="getlistSet"
/>


methods: {
    getRowKeys(row) { 
      return row.id
    },
    handleDialogClose() { //设置弹窗关闭事件
      this.$refs.multipleTable.clearSelection(); //关闭弹窗时清空选表所选项
    },
    handleSelectionChange(val) { //获取所选数据
      this.foodList = val
    },
    submitSet() {
      let newArr = []
      for (let i = 0; i < this.foodList.length; i++) {
        newArr.push(this.foodList[i].id)
      }
      newArr = [...new Set(newArr)]
      let resultString = newArr.join(','); //用逗号拼接所选数据id
      let obj = {
        week_id: this.weekId,
        food_id: resultString,
        type: 1
      }
      if (obj.food_id == '') {
        this.$message({
          message: "请选择",
          type: "error",
        });
        return
      }
     //调保存接口。。。。。
    },
    getlistSet() { //获取数据
      this.listLoading = true;
      getFood(this.listQuery).then((res) => {
        this.listLoading = false;
        if (res.errcode != 0) return;
        this.setList = res.data.list;//表格数据
        res.data.list.forEach((row) => {
          if (row.is_choose == 1) {//已选中项回显
            this.$refs.multipleTable.toggleRowSelection(row)
          }
        })
      });
    },
}