element-plus: [Bug Report] Table Attributes "expand-row-keys" has changed, but fold not work.

Element Plus version

1.0.2-beta.71

OS/Browsers version

Windows 10 Edge93

Vue version

3.2.3

Reproduction Link

https://codesandbox.io/s/element-plus-spa-forked-b6u4z?file=/src/App.vue

Steps to reproduce

<template>
  <div>
    <el-table
      :data="tableData"
      row-key="id"
      border
      :expand-row-keys="expandKeys"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="name" label="name"></el-table-column>
    </el-table>
  </div>
  <div>
    <el-button type="primary" @click.stop="handleClick">{{
      expandFlag ? "Fold" : "Expand"
    }}</el-button>
  </div>
</template>


<script>
import { toRefs, reactive } from "vue";
export default {
  setup() {
    const tableData = [
      {
        id: "A1",
        name: "A1",
        children: [
          { id: "A11", name: "A11" },
          { id: "A12", name: "A12" },
        ],
      },
      {
        id: "B1",
        name: "B1",
        children: [
          { id: "B11", name: "B11" },
          { id: "B12", name: "B12" },
          {
            id: "B13",
            name: "B13",
            children: [
              { id: "B131", name: "B131" },
              { id: "B132", name: "B132" },
            ],
          },
        ],
      },
      { id: "C1", name: "C1" },
    ];
    const state = reactive({
      data: [],
      expandKeys: [],
      expandFlag: false,
    });

    const handleClick = () => {
      if (state.expandFlag) {
        // make tree fold
        state.expandFlag = false;
        state.expandKeys = [];
      } else {
        // make tree expand
        state.expandFlag = true;
        state.expandKeys = ["A1", "B1", "B13"];
      }
    };

    return {
      tableData,
      ...toRefs(state),
      handleClick,
    };
  },
};
</script>

I cant expanded the tree, but can’t fold by set “expand-row-key” with empty array.

the element-plus source code bellow

  // file: packages\components\table\src\store\tree.ts
  // line: 79
  // method: updateTreeData
  // conent:
      const getExpanded = (oldValue, key) => {
        const included =
          ifExpandAll ||
          (expandRowKeys.value && expandRowKeys.value.indexOf(key) !== -1)
        return !!((oldValue && oldValue.expanded) || included)
      }

if included was false, but oldValue.expanded still true, so it return true. 这不科学…，希望直接改成

        const included = (expandRowKeys.value && expandRowKeys.value.indexOf(key) !== -1)
        return !!included

What is Expected?

set “expand-row-key” with empty array, and tree folded.

What is actually happening?

tree still expanded.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (9 by maintainers)

Most upvoted comments

我抓紧修复

Alanscut on Sep 29, 2021

@Alanscut 我们在下个版本前赶紧修一下吧 @bitjjj 感谢指出 🙇 有你的反馈太重要了。

jw-foss on Sep 29, 2021

<template>

  <el-table :data="tableData1" row-key="id" border lazy :load="load" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :expand-row-keys="[3]">
    <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>
  import { defineComponent, ref } from 'vue'
  export default defineComponent({
    setup() {
      const tableData1 = ref([
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            hasChildren: true,
          }],
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ])

      const load = (tree, treeNode, resolve) => {
        setTimeout(() => {
          resolve([
            {
              id: 311,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 321,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
          ])
        }, 5000)
      }

      return {
        tableData,
        tableData1,
        load,
      }
    },
  })
</script>

bitjjj on Sep 29, 2021

Translation of this issue: