Element-ui 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-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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-tableref="singleTable":data="tableData"highlight-current-row@current-change="handleCurrentChange"style="width: 100%"><el-table-columntype="index"width="50"></el-table-column><el-table-columnproperty="date"label="日期"width="120"></el-table-column><el-table-columnproperty="name"label="姓名"width="120"></el-table-column><el-table-columnproperty="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-columntype="selection"width="55"></el-table-column><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="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）