Appearance
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)
}