ToB企服应用市场:ToB评测及商务社交产业平台

标题: Element table组件动态设置expand展开项以及同时只展开一项 [打印本页]
作者: 温锦文欧普厨电及净水器总代理    时间: 2024-8-24 15:45
标题: Element table组件动态设置expand展开项以及同时只展开一项
场景一：table表格展开项过多，界面数据太繁杂影响检察。
  场景二：Element Table加载的数据发生变化时，会重新渲染界面，之前的展开项会主动关闭，用户需要手动去打开展开项，频繁的手动操作会极大的影响客户体验。
  一、Element expand相关参数

Element Table 是一个基于 Element UI 的表格组件。要设置 Element Table 的默认展开项，可以使用 default-expand-all 属性将所有行都展开，或者使用 expand-row-keys 属性设置默认展开的行的 key。



比方，要将所有行都默认展开，可以将 default-expand-all 设置为 true：
  1. <el-table :data="tableData" default-expand-all>
  2.   <!-- 表格列定义 -->
  3. </el-table>
复制代码
要设置默认展开的行，可以将 expand-row-keys 设置为一个包含行的 key 的数组：
  1. <el-table ref="tableList" :data="tableData" :row-key="row => row.id" :expand-row-keys="[1, 3]">
  2.   <!-- 表格列定义 -->
  3. </el-table>
复制代码
在上面的例子中，设置了 row-key 属性来指定行的 key 为 id，并将 expand-row-keys 设置为包含 1 和 3 的数组，如许在加载表格时这两行会主动展开。
如果需要了解更多Element Table参数，请参考官方文档：Element 官方文档
二、场景一问题办理

  1. <el-table ref="tableList" :data="tableData" :row-key="row => row.id"
  2. :expand-row-keys="expandRows" @expand-change="handleExpandChange">
  3.   <!-- 表格列定义 -->
  4. </el-table>
  6. export default {
  7.     data() {
  8.         return {
  9.             // 展开数组
  10.             expandRows: [],
  11.         };
  12.     },
  13.     methods: {
  14.         // 展开改变触发函数,只展开一行
  15.         handleExpandChange(row, expandedRows) {
  16.             if (expandedRows.length > 1) {
  17.                 this.$refs.tableList.toggleRowExpansion(expandedRows[0])
  18.             }
  19.         },
  20.     }
  21. }
  22. </script>
复制代码
在上面的例子中，我们通过 expand-change 展开触发变乱来实现只展开一项。expand-change回调函数的一个参数为当前的展开行，第二个参数为已经展开项的行数组。如果展开项的数量大于1，就通过toggleRowExpansion 方法动态关闭前一项。
留意，为了使用 $refs.tableList.toggleRowExpansion 方法，我们需要给表格添加一个 ref 属性，如上面例子中的 ref="tableList"。
三、场景二问题办理

  1. <el-table ref="tableList" :data="tableData" :row-key="row => row.id"
  2. :expand-row-keys="expandRows" @expand-change="handleExpandChange">
  3.   <!-- 表格列定义 -->
  4. </el-table>
  6. export default {
  7.     data() {
  8.         return {
  9.             // 展开项数组
  10.             expandRows: [],
  11.             // 展开行key
  12.             expandKey: null,
  13.         };
  14.     },
  15.     methods: {
  16.         /** 查询table列表数据 */
  17.         getList() {
  18.             this.loading = true;
  19.             listDeliveryOrder(this.queryParams).then(response => {
  20.                 this.deliveryOrderList = response.rows;
  21.                 this.total = response.total;
  22.                 this.loading = false;
  23.                 this.resumeTable();
  24.             });
  25.         },
  26.         /*恢复table展开项*/
  27.         resumeTable() {
  28.             if (this.expandKey) {
  29.                 this.expandRows = []
  30.                 this.expandRows.push(this.expandKey);
  31.             }
  32.         },
  33.     }
  34. }
  35. </script>
复制代码
在上面的例子中我们可以通过提前记录用户之前的展开项key，当重新渲染数据时，将记录的expandkey，push到 expand-row-keys 参数的数组中，实现默认展开table项

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4