The Element table component dynamically sets the expand item and expands only one item at the same time

Scenario 1 : There are too many expanded items in the table, and the interface data is too complicated to view.

Scenario 2 : When the data loaded by Element Table changes, the interface will be re-rendered, and the previous expansion items will be automatically closed. Users need to manually open the expansion items. Frequent manual operations will greatly affect the customer experience.

1. Element expand related parameters

Element Table is a table component based on Element UI. To set the default expansion items of Element Table, you can use default-expand-allthe attribute to expand all rows, or use the expand-row-keys attribute to set the keys of the rows that are expanded by default.

For example, to expand all lines by default, set default-expand-allthe to true:

<el-table :data="tableData" default-expand-all>
  <!-- 表格列定义 -->
</el-table>

To set which rows to expand by default, you can set expand-row-keys to an array containing the row keys:

<el-table ref="tableList" :data="tableData" :row-key="row => row.id" :expand-row-keys="[1, 3]">
  <!-- 表格列定义 -->
</el-table>

In the above example, row-keythe attribute is set to specify the key of the row id, and expand-row-keys is set to an array containing 1and 3, so that these two rows will be automatically expanded when the table is loaded.

If you need to know more Element Table parameters, please refer to the official documentation: Element official documentation

2. Scenario 1 Problem Solving

<el-table ref="tableList" :data="tableData" :row-key="row => row.id" 
:expand-row-keys="expandRows" @expand-change="handleExpandChange">
  <!-- 表格列定义 -->
</el-table>

export default {
    data() {
        return {
            // 展开数组
            expandRows: [],
        };
    },
    methods: {
        // 展开改变触发函数,只展开一行
        handleExpandChange(row, expandedRows) {
            if (expandedRows.length > 1) {
                this.$refs.tableList.toggleRowExpansion(expandedRows[0])
            }
        },
    }
}
</script>

In the above example, we expand only one item through the expand-change trigger event. One parameter of the expand-change callback function is the current expanded row, and the second parameter is the row array of expanded items. If the number of expanded items is greater than 1, the previous item is dynamically closed through the toggleRowExpansion method.

Note that in order to use $refs.tableList.toggleRowExpansionthe method, we need to add a refproperty to the form, as in the example above ref="tableList".

3. Scenario 2 Problem Solving

<el-table ref="tableList" :data="tableData" :row-key="row => row.id" 
:expand-row-keys="expandRows" @expand-change="handleExpandChange">
  <!-- 表格列定义 -->
</el-table>

export default {
    data() {
        return {
            // 展开项数组
            expandRows: [],
            // 展开行key
            expandKey: null,
        };
    },
    methods: {
        /** 查询table列表数据 */
        getList() {
            this.loading = true;
            listDeliveryOrder(this.queryParams).then(response => {
                this.deliveryOrderList = response.rows;
                this.total = response.total;
                this.loading = false;
                this.resumeTable();
            });
        },
        /*恢复table展开项*/
        resumeTable() {
            if (this.expandKey) {
                this.expandRows = []
                this.expandRows.push(this.expandKey);
            }
        },
    }
}
</script>

In the above example, we can record the user’s previous expansion item key in advance, and push the recorded expandkey to the expand-row-keys parameter array when re-rendering the data, so as to realize the default expansion of the table item