NaiveUI做后台系统列表时想做一个动态隐藏或显示列的功能,如图
代码
<!--组件部分-->
<n-data-table :columns="columns" :data="data"/>
//要展示的列
let columns = [
{
type: "selection",
fixed: "left"
},
{
title: "ID",
key: "id",
width: 50,
fixed: "left"
},
{
title: "管理员名称",
key: "name",
fixed: "left"
},
{
title: "头像",
key: "avatar",
fixed: "left",
render(row, index) {
return h(NImage, {
src: row.avatar,
width: 50
});
}
},
{
title: "所属角色",
key: "role",
fixed: "left",
render(row, index) {
return h(NTag,{
bordered: false,
type: 'info'
},{
default: () => row.role
})
}
},
{
title: "手机号",
key: "phone",
fixed: "left",
render(row){
return row.phone.replace(/^(\d{3})\d+(\d{4})$/, "$1****$2")
}
},
{
title: "邮箱",
key: "email"
},
{
title: "状态",
key: "status",
width: 100,
fixed: "right",
render(row, index) {
return h(NTag, {
bordered: false,
type: (index % 2 == 0 ? 'success' : 'error')
}, {
default: () => row.status
});
}
},
{
title: "最后登陆时间",
key: "last_time"
},
{
title: "操作",
key: "opt",
width: 200,
fixed: "right",
render(row, index) {
return [
h(NButton, {
quaternary: true,
type: 'info',
size: 'small',
onClick: () => {
_edit(row)
}
}, {
default: () => '编辑'
}),
h(NButton, {
quaternary: true,
type: 'error',
size: 'small',
style: { marginLeft: '2px' },
onClick: () => {
_doDelete(row.id)
}
}, {
default: () => '删除'
})
]
}
}
];
发现动态修改columns属性之后数据表并没有重新渲染,看了一圈文档也没有找能解决的办法,后面经过多番查找找到两个办法
第一种办法,使用数据表的loading属性达到重新渲染的目的:
<n-data-table :columns="columns" :data="data" :loading="loading" />
//数据表是否显示 loading 状态
const loading = ref(false)
//动态修改数据表列 key参数是要隐藏的列key值
function handelDataTableColumsSetting(key) {
//这里只写了隐藏
columns = columns.filter(item => item.key !== key)
//loading状态开启再关闭
loading.value = true;
loading.value = false;
}
第二种办法,更新数据表的key达到重新渲染的目的:
<!--组件部分-->
<n-data-table :columns="columns" :data="data" :key="dataTableKey"/>
//数据表key,默认key_
const dataTableKey = ref('key_')
//动态修改数据表列 key参数是要隐藏的列key值
function handelDataTableColumsSetting(key) {
//这里只写了隐藏
columns = columns.filter(item => item.key !== key)
//更新数据表key
dataTableKey.value = 'key_' + Math.random()
}
同样的
这种全部展开和全部折叠功能也能用以上两种办法解决。