el-table收集列表中被选中复选框数据信息

最新推荐文章于 2024-09-19 16:01:06 发布

顽强的小豆子

最新推荐文章于 2024-09-19 16:01:06 发布

阅读量1.9k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qiuyushuofeng/article/details/124546708

版权

本文介绍如何在Vue表格中实现复选框选中状态的动态切换，并通过`handleSelectionChange`方法处理选中数据。展示了如何使用`toggleSelection`方法来控制行的选中状态，以及如何将选中的数据对象数组保存到`multipleSelection`变量中。

摘要由CSDN通过智能技术生成

<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    //1.复选框选中的一旦有变化，就会触发这个函数，函数能够把选中的多行数据打包成对象数组
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div></template>




<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },


    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //2.val值，被选中的对象数组信息存放在val中
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

<el-table
        :data="tableData"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange">
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="index" width="50">
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="nickName" label="用户昵称" width="120">
        </el-table-column>
        <el-table-column prop="roleName" label="权限列表" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="创建时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="gmtModified"
          label="更新时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <!--配置， 修改，删除 -->
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="{ row, $index }">
            <el-button
              icon="el-icon-user-solid"
              type="info"
              size="mini"
              @click="changeUserRole(row)"
            ></el-button>
            <el-button
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click="changeUsername(row)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click = "deleteUser(row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
<script>
export default {
  data() {
    return {
      
      tableData: [],
      username: "",
      tableShow: true,
      addUserFormVisible: false,
      form: {
        username: "",
        nickName: "",
        password: "",
      },
      userIdList: [],
      changeUsernameVisible: false,
      checkAll: false,
      userId: ''
    };
  },
  method:{
    handleSelectionChange(val){
      for(let i=0;i<val.length;i++){
        this.userIdList[i] = val[i].id
      }
     
    }
}