Skip to content

extend-table使用复表头时,会导致column丢失 #4

Open
@walterFeng

Description

@walterFeng

重现步骤

  • 使用extend-table展示带复表头的数据,并在children中使用一个data的属性;
  • 在适当的时机改变该属性值;
  • 错误结果:改变属性值后表格的列将会丢失;
  • 预期:改变之后与该属性无关的列不受影响;

重现最小示例:

使用文档中的elem-table示例,在data中添加simple属性,点击删除按钮时修改simple的值,点击后表格的column列将丢失。

重现示例代码 <script> export default { data() { return { loading: false, data: [],
    simple: false, // <== bug
  };
},
computed: {
  columns() {
    return [{
      label: '编号',
      type: 'index',
      prop: 'index',
      width: 80,
    }, {
      label: '姓名',
      prop: 'name',
      render: (h) => h('button', {
        on: {
          click: () => {
            this.simple = !this.simple;
            console.log('click');
          },
        },
      }, '删除'),
    }, {
      children: [{
        headerAlign: 'right',
        headerSlotRender: this.headerSlotRender,
        children: [this.simple ? {
          label: '备注前',
          prop: 'item.remark2',
        } : {
          label: '备注1',
          prop: 'item.remark1',
        }, {
          label: '备注',
          prop: 'item.remark',
          type: 'input',
          attrs: {
            type: 'textarea',
          },
          listeners: {
            input: (rowIndex, val) => {
              console.warn(rowIndex, val);
            },
          },
        }],
      }, {
        headerSlotRender: this.headerSlotRender,
        prop: 'item.age',
        render: (h, p) => h('h2', {
          style: 'overflow: hidden;text-overflow: ellipsis;',
        }, p.row.name),
      }],
    }];
  },
},
mounted() {
  this.fetchMockData();
},
methods: {
  onDataChange() {
    console.warn(this.data);
  },
  headerSlotRender(h) {
    return h('i', { class: 'el-icon-time' });
  },
  fetchMockData() {
    this.loading = true;
    setTimeout(() => {
      this.data = [{
        id: 1,
        name: '',
        item: {
          age: 18,
          remark: '',
        },
      }, {
        id: 2,
        name: 'ccsdaskdhajksbdajksdbakdbksadbsjdbkda',
        item: {
          age: 19,
          remark: '备注',
        },
      }];
      this.loading = false;
    }, 300);
  },
},

};
</script>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions