naive ui 表格 data-table 的一些自定义 用法
3,拿到选中复选框的id(return 出去)3,return 出去。
·
记录一下 以便复用
1,表头与内容居中
<style scoped>
:deep .n-data-table-th {
text-align: center;
}
:deep .n-data-table-td {
text-align: center;
}
</style>
2,右侧操作,动态控制按钮状态
如:人员状态为离职时,编辑按钮禁用
按钮动态文字变化
{
title: "",
width: 1,
key: "status",
titleColSpan: data_.user_status == 4 ? 1 : 3,//表头合并
render(row) {
return h(NButton, {
size: "small",
// color: 'blue',
type:'info',
disabled: row.status == '在职' ? false : true,//编辑按钮禁用,判断
text: data_.user_status == 4 ? true : false,
onClick: () => sendMail_2(row)
}, {
default: () => {
if (data_.user_status != 4) {
return '编辑'
} else if (data_.user_status == 4) {
return ''
}
}
});
},
},
动态显示隐藏某列
如:工作状态列的隐藏显示
{
// <!-- 通过条件判断,动态数据显示 -->
title:data_.user_status==2?'工作状态':'',
key:data_.user_status==2?'status':''
},
4,复选框的应用
1,绑定
2,声明
3,拿到选中复选框的id(return 出去)
//在return中
rowKey: (row) => row.id,
handleCheck(rowKeys) {
checkedRowKeysRef.value = rowKeys;
console.log('-=选中的复选框 id为',rowKeys);
},
5,分页与表格结合
1,绑定
2,声明
const paginationReactive = reactive({
page: 1,//默认在第几页
pageSize: 5,//每页条数
showSizePicker: true,
pageSizes: [3, 5, 7, 10],//可切换的 每页条数
onChange: (page) => {
paginationReactive.page = page;
},
onUpdatePageSize: (pageSize) => {
paginationReactive.pageSize = pageSize;
paginationReactive.page = 1;
}
});
3,return 出去
return {
pagination: paginationReactive,
}
更多推荐
已为社区贡献3条内容
所有评论(0)