Element-ui el-table组件单选/多选/跨页勾选讲解

文章目录

• 一、el-table介绍
• 二、el-table单选
• 三、el-table多选
• 四、el-table跨页勾选
• 五、热门文章

一、el-table介绍

el-table 是 Element UI（一个基于 Vue.js 的高质量 UI 组件库）中的一个组件，用于展示表格数据。通过 el-table，你可以很方便地创建具有多种功能（如排序、筛选、分页等）的表格。

el-table 使用示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小狮',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        // ...其他数据
      }]
    }
  }
}
</script>

在上面的示例中：

• el-table 是表格的根组件，通过 :data 属性绑定要展示的数据（这里是一个数组）。
• el-table-column 是表格列的组件，用于定义表格的每一列。
  • prop 属性指定了每一列对应的数据字段。
  • label 属性指定了列的标题。
  • width 属性（可选）用于指定列的宽度。

Element UI 的 el-table 组件提供了许多其他的功能和配置选项，如分页、排序、筛选、行展开、自定义模板等，你可以根据需要进一步了解和使用它们。

二、el-table单选

Table 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow，oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

<template>
  <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <el-table-column
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      property="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      property="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      property="address"
      label="地址">
    </el-table-column>
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
    <el-button @click="setCurrent()">取消选择</el-button>
  </div>
</template>

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

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    }
  }
</script>

三、el-table多选

在 Element UI 的 el-table 组件中实现列表勾选选择（即多选功能），你需要使用 type="selection" 的 el-table-column，并且监听 selection-change 事件。但如果你希望用户能够明确地选择多行（而不是单选），你通常不需要做任何特殊设置，因为 type="selection" 默认就是用于多选的。

el-table 列表勾选选择的示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55"
    ></el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小狮',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        // ...其他数据
      ],
      multipleSelection: [] // 用于存储选中行的数组
    };
  },
  methods: {
    handleSelectionChange(val) {
      // val 是一个包含选中行数据的数组
      this.multipleSelection = val;
      console.log('当前选中项', val);
    }
  }
};
</script>

在这个示例中：

• el-table-column 的 type 属性设置为 "selection" 来启用勾选选择。
• @selection-change="handleSelectionChange" 监听选择变化事件，并将选中的行数据数组作为参数传递给 handleSelectionChange 方法。
• handleSelectionChange 方法接收一个数组 val，它包含了所有当前被勾选（选中）的行数据。
• multipleSelection 数据属性用于在组件内部存储当前选中的行数据，但这并不是必须的，你可以根据需要在 handleSelectionChange 方法中直接处理这些数据。

四、el-table跨页勾选

在 Element UI 的 el-table 组件中实现跨页勾选功能，需要确保在分页时能够保留之前页面的选择状态。这通常涉及到在表格组件上设置一些特定的属性和监听事件，并结合后端分页接口的数据处理。

以下是实现 el-table 跨页勾选功能的基本步骤：

1. 添加 row-key 属性 ：在 el-table 上设置 row-key 属性，该属性用于指定表格中每一行的唯一标识符，通常可以是行数据的某个唯一字段（如 ID）。

<el-table :row-key="getRowKey" ...>
  ...
</el-table>

在 Vue 实例的 methods 中定义 getRowKey 方法：

methods: {
  getRowKey(row) {
    return row.id; // 假设每行数据都有一个唯一的 id 字段
  }
}

2. 设置 reserve-selection 属性 ：在 el-table-column 的 type="selection" 上设置 reserve-selection 属性为 true，这将使得在分页时能够保留之前的选择状态。

<el-table-column type="selection" reserve-selection ...>
</el-table-column>

3. 处理分页数据：确保后端分页接口返回的数据包含之前页面选中行的状态信息。这通常需要在后端进行实现，使得在每次请求新的分页数据时，后端能够知道哪些行是之前被选中的。
4. 监听 selection-change 事件 ：在 el-table 上监听 selection-change 事件，并在事件处理函数中更新当前选中的行数据。这通常用于在前端维护一个表示当前选中行数据的数组。

<el-table ... @selection-change="handleSelectionChange">
  ...
</el-table>

在 Vue 实例的 methods 中定义 handleSelectionChange 方法：

methods: {
  handleSelectionChange(val) {
    this.multipleSelection = val; // 更新当前选中的行数据数组
    // 可以在这里进行其他操作，如向后端发送更新选中状态的请求等
  }
}

5. 注意事项：

• 如果后端分页接口不支持跨页勾选功能，你可能需要在前端自行实现一种机制来跟踪和保存选中状态。例如，可以使用浏览器的 localStorage 或 Vuex 等状态管理库来保存选中状态。
• 当用户切换页面或进行其他可能改变表格数据的行为时，需要确保之前的选择状态被正确地保留和恢复。这可能需要你在 Vue 组件的生命周期钩子（如 created、mounted、updated 等）中进行一些额外的处理。

完整代码

<template>  
  <div>  
    <el-pagination  
      @current-change="handlePageChange"  
      :current-page="currentPage"  
      :page-size="pageSize"  
      layout="prev, pager, next"  
      :total="totalItems"  
    ></el-pagination>  
  
    <el-table  
      :data="tableData"  
      style="width: 100%"  
      @selection-change="handleSelectionChange"  
      row-key="id"  
    >  
      <el-table-column  
        type="selection"  
        reserve-selection  
      ></el-table-column>  
      <el-table-column  
        prop="date"  
        label="日期"  
        width="180"  
      ></el-table-column>  
      <el-table-column  
        prop="name"  
        label="姓名"  
        width="180"  
      ></el-table-column>  
      <!-- 其他列 -->  
    </el-table>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      currentPage: 1, // 当前页码  
      pageSize: 10, // 每页显示数量  
      totalItems: 0, // 总数据条数，从后端接口获取  
      tableData: [], // 当前页数据  
      selectedRows: [], // 所有选中的行数据，用于跨页保存状态  
    };  
  },  
  created() {  
    this.fetchData(); // 初始化时加载第一页数据  
  },  
  methods: {  
    // 加载数据的函数（需要调用后端接口）  
    fetchData() {  
      // 假设你有一个 fetchTableData 函数，用于从后端获取分页数据  
      // 这里需要传入当前页码和每页显示数量，并返回数据  
      // 同时，这个函数还需要处理后端返回的总数据条数 totalItems  
      this.fetchTableData(this.currentPage, this.pageSize)  
        .then(response => {  
          this.totalItems = response.total; // 更新总数据条数  
          this.tableData = response.data; // 更新当前页数据  
          // 如果后端支持跨页勾选，还需要处理 selectedRows  
          // 例如，从 response 中获取之前选中的行 ID，然后筛选出对应的行数据放入 selectedRows  
        })  
        .catch(error => {  
          // 处理错误  
        });  
    },  
    handlePageChange(val) {  
      this.currentPage = val;  
      this.fetchData(); // 切换页码时重新加载数据  
    },  
    handleSelectionChange(val) {  
      // val 是当前页选中的行数据数组  
      // 这里需要处理跨页选中的逻辑  
      // 你可以将 val 与 selectedRows 进行合并、去重等操作  
      // 并将最终的结果赋值给 selectedRows  
      this.selectedRows = val; // 简化的示例，实际中可能需要更复杂的逻辑  
      // 你还可以选择将 selectedRows 发送到后端进行保存（如果需要的话）  
    },  
    // 假设的 fetchTableData 函数（你需要根据后端接口来实现）  
    fetchTableData(page, size) {  
      // 发送请求到后端获取数据，并返回 Promise  
    },  
  },  
};  
</script>

五、热门文章

1. 【温故而知新】vue运用之探讨下单页面应用（SPA）与多页面应用（MPA）
2. 【温故而知新】探讨下对vue的mixin的理解
3. 【温故而知新】vue修饰符有哪些
4. 【温故而知新】vue组件间通信的实现方式
5. draggable实现拖拽、禁止拖拽、拖拽后元素重新排序到指定位置
6. router路由按需加载
7. vue页面导出Word文档（含图片）
8. Vue拖拽组件awe-dnd
9. el-tabs事件绑定（Element UI）