Skip to content
On this page

updateColumnOption()

总线事件监听设置中使用

更新表格列设置

  • 表格(新)组件

多级表头设置

js
(data, comp) => {
  const tableColumnOption = [
    {
      width: 130,
      label: '姓名',
      prop: 'name',
    }, {
      label: '性别1',
      prop: 'sex',
    }, {
      label: '多级表头',
      children: [{
        label: '信息',
        children: [{
          label: '年龄',
          prop: 'age',
        }, {
          label: '手机号',
          prop: 'phone',
        }]
      }, {
        label: '级别',
        prop: 'grade',
        type: 'select',
      }]
    }
  ]

  comp.updateColumnOption(tableColumnOption)

  const list = [
    {
      id: '1',
      name: '张三',
      age: 14,
      grade: 1,
      phone1: '17547400800',
      phone: '17547400800',
      icon: 'el-icon-time',
      test: 1,
      sex: '',
    }, {
      id: '4',
      name: '王五',
      age: 10,
      grade: 1,
      test: 1,
      sex: '',
      icon: 'el-icon-star-on',
      phone1: '17547400800',
      phone: '17547400800'
    }
  ]

  comp.updateStaticData(list)
}
(data, comp) => {
  const tableColumnOption = [
    {
      width: 130,
      label: '姓名',
      prop: 'name',
    }, {
      label: '性别1',
      prop: 'sex',
    }, {
      label: '多级表头',
      children: [{
        label: '信息',
        children: [{
          label: '年龄',
          prop: 'age',
        }, {
          label: '手机号',
          prop: 'phone',
        }]
      }, {
        label: '级别',
        prop: 'grade',
        type: 'select',
      }]
    }
  ]

  comp.updateColumnOption(tableColumnOption)

  const list = [
    {
      id: '1',
      name: '张三',
      age: 14,
      grade: 1,
      phone1: '17547400800',
      phone: '17547400800',
      icon: 'el-icon-time',
      test: 1,
      sex: '',
    }, {
      id: '4',
      name: '王五',
      age: 10,
      grade: 1,
      test: 1,
      sex: '',
      icon: 'el-icon-star-on',
      phone1: '17547400800',
      phone: '17547400800'
    }
  ]

  comp.updateStaticData(list)
}
  • 表格 组件

修改表格列设置

js
(data,comp) => {
  // 表格列配置
  const columnOption = [
    {label: '姓名', prop: 'xm', width: 50},
    {label: '地址', prop: 'dz'}
  ]
  // 更新表格列
  comp.updateColumnOption(columnOption)

  // 表格数据值
  const list = [
    {xm: '李xx', dz: '这一条地址'},
    {xm: '李2xx', dz: '这二条地址'},
  ]
  
  // 地址列显示红色字
  list.forEach(x => x.dz = `<span style="color: red;">${x.dz}</span>`)

  // 更新表格数据
  comp.updateStaticData(list)
}
(data,comp) => {
  // 表格列配置
  const columnOption = [
    {label: '姓名', prop: 'xm', width: 50},
    {label: '地址', prop: 'dz'}
  ]
  // 更新表格列
  comp.updateColumnOption(columnOption)

  // 表格数据值
  const list = [
    {xm: '李xx', dz: '这一条地址'},
    {xm: '李2xx', dz: '这二条地址'},
  ]
  
  // 地址列显示红色字
  list.forEach(x => x.dz = `<span style="color: red;">${x.dz}</span>`)

  // 更新表格数据
  comp.updateStaticData(list)
}

Last updated: