bee-table 动态绑定列的问题 #645

JohnnieCai · 2020-11-03T05:57:14Z

环境及版本信息

tinper-bee 版本号:
2.4.0
若使用单个组件，请标明该组件版本号：
bee-table 2.2.61
当前项目中react的版本号：

所使用的操作系统：
win10
所使用的浏览器：
Chrome 85.0.4183.102

您所在的部门或项目名称：

描述这个问题:

1、组件相关代码


代码粘贴区域

2、报错信息

在窗体加载时设置了默认column，选择导入文件后根据导入文件的列对column进行动态更新，更新后通过setState对column和data进行更新，通过跟踪发现render中的值是更新后的值，但是结果是table仍然只显示了默认的列和对应的数据

当前的行为：效果（可截图说明）及动作描述

期望的行为:

table能够根据更新后动态的列展示对应绑定的数据

The text was updated successfully, but these errors were encountered:

whizbz11 · 2020-11-03T06:36:45Z

异步更改column没有重现你说的问题，你可以给column赋个新值试下，比如column =Object.assign(column)再赋值给Table。

whizbz11 · 2020-11-03T06:38:45Z

/**
 *
 * @title 多列排序
 * @parent 列操作-排序 Sort
 * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
 * demo0903
 */

import React, { Component } from "react";
import {Checkbox,Button,Icon} from "tinper-bee";
import Table from "../../src";
import multiSelect from "../../src/lib/multiSelect.js";
import sort from "../../src/lib/sort.js";
import sum from "../../src/lib/sum.js";

const columns13 = [
  {
    title: "订单编号",
    dataIndex: "a",
    key: "a",
    className:'dfasd',
    width: 200,
    sorter: (pre, after) => {return pre.a.localeCompare(after.a)},
    sorterClick:(data,type)=>{//排序的回调函数
      //type value is up or down
      console.log("data",data);
    }
  },
  {
    title: "金额",
    dataIndex: "b",
    key: "b",
    width: 200,
    sumCol: true,
    sorter: (pre, after) => pre.b - after.b,
    orderNum: 1,
    order: 'ascend',
    sorterClick:(data,type)=>{//排序的回调函数
      //type value is up or down
      console.log("data",data);
    }
  },
  {
    title: "整单数量",
    dataIndex: "c",
    key: "c",
    width: 200,
    sumCol: true,
    sorter: (pre, after) => pre.c - after.c,
    orderNum: 2,
    order: 'ascend',
    sorterClick:(data,type)=>{//排序的回调函数
      //type value is up or down
      console.log("data",data);
    }
  },
  {
    title: "日销售量",
    dataIndex: "e",
    key: "e",
    width: 200,
    sumCol: true,
    orderNum: 3,
    order: 'descend',
    sorter: (pre, after) => pre.e - after.e,
  },
  {
    title: "供应商",
    dataIndex: "d",
    key: "d",
    width: 200
  }
];

const data13 = [
  { a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
  { a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
  { a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
  { a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
  { a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
];


//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);

class Demo13 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data13: data13,
      columns13: columns13,
      selectedRow: this.selectedRow,
      selectDisabled: this.selectDisabled
    };
  }

  componentDidMount(props){
    const _this = this;
    setTimeout(()=>{
      _this.setState({
        data13:data13.slice(0,1),
       columns13:columns13.slice(0,1)
      })
 
    },5000)
    setTimeout(()=>{
     
    })
  }

  getSelectedDataFunc = data => {
    console.log(data);
  };
  selectDisabled = (record, index) => {
    // console.log(record);
    if (index === 1) {
      return true;
    }
    return false;
  };
  selectedRow = (record, index) => {
    // console.log(record);
    if (index === 0) {
      return true;
    }
    return false;
  };
  onClick = () => {
    this.setState({
      selectedRow: function() {}
    });
  };

  render() {
    let multiObj = {
      type: "checkbox"
    };
    let sortObj = {
      mode:'multiple'
    }
   
    return (
      <div>
        <Button className="editable-add-btn" onClick={this.onClick}>
          清空已选
        </Button>
        <ComplexTable
          bordered
          selectDisabled={this.state.selectDisabled}
          selectedRow={this.state.selectedRow}
          columns={this.state.columns13}
          data={this.state.data13}
          multiSelect={multiObj}
          sort={sortObj}
          getSelectedDataFunc={this.getSelectedDataFunc}
        />
      </div>
    );
  }
}
export default Demo13;

可以对比下代码区别

JohnnieCai · 2020-11-03T07:59:34Z

/**
 *
 * @title 多列排序
 * @parent 列操作-排序 Sort
 * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
 * demo0903
 */

import React, { Component } from "react";
import {Checkbox,Button,Icon} from "tinper-bee";
import Table from "../../src";
import multiSelect from "../../src/lib/multiSelect.js";
import sort from "../../src/lib/sort.js";
import sum from "../../src/lib/sum.js";

const columns13 = [
  {
    title: "订单编号",
    dataIndex: "a",
    key: "a",
    className:'dfasd',
    width: 200,
    sorter: (pre, after) => {return pre.a.localeCompare(after.a)},
    sorterClick:(data,type)=>{//排序的回调函数
      //type value is up or down
      console.log("data",data);
    }
  },
  {
    title: "金额",
    dataIndex: "b",
    key: "b",
    width: 200,
    sumCol: true,
    sorter: (pre, after) => pre.b - after.b,
    orderNum: 1,
    order: 'ascend',
    sorterClick:(data,type)=>{//排序的回调函数
      //type value is up or down
      console.log("data",data);
    }
  },
  {
    title: "整单数量",
    dataIndex: "c",
    key: "c",
    width: 200,
    sumCol: true,
    sorter: (pre, after) => pre.c - after.c,
    orderNum: 2,
    order: 'ascend',
    sorterClick:(data,type)=>{//排序的回调函数
      //type value is up or down
      console.log("data",data);
    }
  },
  {
    title: "日销售量",
    dataIndex: "e",
    key: "e",
    width: 200,
    sumCol: true,
    orderNum: 3,
    order: 'descend',
    sorter: (pre, after) => pre.e - after.e,
  },
  {
    title: "供应商",
    dataIndex: "d",
    key: "d",
    width: 200
  }
];

const data13 = [
  { a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
  { a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
  { a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
  { a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
  { a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
];


//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);

class Demo13 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data13: data13,
      columns13: columns13,
      selectedRow: this.selectedRow,
      selectDisabled: this.selectDisabled
    };
  }

  componentDidMount(props){
    const _this = this;
    setTimeout(()=>{
      _this.setState({
        data13:data13.slice(0,1),
       columns13:columns13.slice(0,1)
      })
 
    },5000)
    setTimeout(()=>{
     
    })
  }

  getSelectedDataFunc = data => {
    console.log(data);
  };
  selectDisabled = (record, index) => {
    // console.log(record);
    if (index === 1) {
      return true;
    }
    return false;
  };
  selectedRow = (record, index) => {
    // console.log(record);
    if (index === 0) {
      return true;
    }
    return false;
  };
  onClick = () => {
    this.setState({
      selectedRow: function() {}
    });
  };

  render() {
    let multiObj = {
      type: "checkbox"
    };
    let sortObj = {
      mode:'multiple'
    }
   
    return (
      <div>
        <Button className="editable-add-btn" onClick={this.onClick}>
          清空已选
        </Button>
        <ComplexTable
          bordered
          selectDisabled={this.state.selectDisabled}
          selectedRow={this.state.selectedRow}
          columns={this.state.columns13}
          data={this.state.data13}
          multiSelect={multiObj}
          sort={sortObj}
          getSelectedDataFunc={this.getSelectedDataFunc}
        />
      </div>
    );
  }
}
export default Demo13;

可以对比下代码区别

我是用的table，并且是在页面加载的时候已经加载完毕，然后点击页面上的按钮触发事件对table的列进行修改更新，不管是直接setState还是setTimeout界面上的列均不会再改变列，数据会改变。列使用的元素是title,dataindex,key,width，而且我用的是对数组进行push增加列对象不是减少，刚才试了下还是不行。

Gaox2025f · 2021-01-26T06:41:20Z

@JohnnieCai 像这样直接清空也不行吗：
/**
*

@title 基本表格
@parent 基础 Basic
@description 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。
demo0101
*/

import React, { Component } from "react";
import Table from "../../src";

const columns = [
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
{ title: "性别", dataIndex: "c", key: "c", width: 100},
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
];

const data = [
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
];

class Demo0101 extends Component {

constructor (props) {
super(props)
this.state = {
columns: columns
}
}

componentDidMount () {
setTimeout(() => {
this.setState({
columns: []
})
}, 3000)
}

render() {
return (

);
}
}

export default Demo0101;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bee-table 动态绑定列的问题 #645

bee-table 动态绑定列的问题 #645

JohnnieCai commented Nov 3, 2020

whizbz11 commented Nov 3, 2020

whizbz11 commented Nov 3, 2020

JohnnieCai commented Nov 3, 2020

Gaox2025f commented Jan 26, 2021

bee-table 动态绑定列的问题 #645

bee-table 动态绑定列的问题 #645

Comments

JohnnieCai commented Nov 3, 2020

环境及版本信息

您所在的部门或项目名称：

描述这个问题:

1、组件相关代码

2、报错信息

当前的行为：效果（可截图说明）及动作描述

期望的行为:

whizbz11 commented Nov 3, 2020

whizbz11 commented Nov 3, 2020

JohnnieCai commented Nov 3, 2020

Gaox2025f commented Jan 26, 2021