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>

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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