vue ant-design table动态控制指定列的 隐藏和显示 第二种方式用的是customRender
博主刚刚在敲代码的时候,遇到了这样一个需求:列表中有A,B,C三列,如果B没有数据的时候,将B隐藏。什么鬼😸,博主使用的是antd3.0版本,用的最基础的Table插件。在column中动态添加B列,拿到数据以后,判断列表中B是否有数据,没数据不作处理,有数据动态添加B列属性到column中。这样既有ok了,博主已经成功解决,
·
应用场景
博主刚刚在敲代码的时候,遇到了这样一个需求:列表中有A,B,C三列,如果B没有数据的时候,将B隐藏。什么鬼😸,博主使用的是antd3.0版本,用的最基础的Table插件。
解决方案
在column中动态添加B列,拿到数据以后,判断列表中B是否有数据,没数据不作处理,有数据动态添加B列属性到column中。
上代码!!!
// 先将含有A,C的column写好
column = [
{
title: '商品名1',
dataIndex: 'A',
key: 'A',
width: 180,
},
{
title: '商品名3',
dataIndex: 'C',
key: 'C',
width: 150,
}
]
//在接口返回的数据中判断,如果B属性存在,就添加B列
if(data.length > 0 && data[0].B){
// 用splice方法,把B元素插入到指定位置
this.column.splice(1, 0,{
title: '商品名2',
dataIndex: 'B',
key: 'B',
});
}
// 数据处理完以后setState一下,页面要重新渲染
this.setState({
data: data
})
这样既有ok了,博主已经成功解决,
方案二
{title: '费用', dataIndex: 'allPrice',
colSpan:0, //隐藏表头
customRender: (value, row, index) => {
debugger
let obj = {
children: value,
attrs: {},
};
obj.attrs.colSpan = 0;
return obj;
},
customRender: (text, row, index,paramV4) => {
const obj = {
children: value,
attrs: {},
};
if (paramV4.code1 != "1050") {
obj.attrs.colSpan = 0;
} else {
obj.attrs.colSpan = 1;
}
return obj
}
},
{title: '备注', dataIndex: 'remark'},
另外这个里面 可以加if 判断
{title: '费用', dataIndex: 'allPrice',
colSpan:0, //隐藏表头
customRender: (value, row, index,paramV4,title) => {
let obj = {
children: value,
attrs: {},
// title:'费用',
};
debugger
console.log(this.paramV4.code1)
if (this.paramV4.code1 != "1050") {
obj.attrs.colSpan = 0;
} else {
obj.attrs.colSpan = 1;
}
// obj.attrs.colSpan = 0;
return obj;
}
},
更多推荐
所有评论(0)