naive ui 表格 data-table 的一些自定义 用法

记录一下 以便复用

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,
        }