naive-ui n-table渲染组件

1、button

{
  key: 'option',
  title: '操作',
  fixed: 'right', // 固定列
  render: row => {
    return h('div', { class: 'flex justify-center flex-items-center' }, [
      h(
        NButton,
        {
          text: true,
          class: 'bg-#297CF7 text-#fff p10px b-rd-4px',
          onClick: () => openOrderDetails(row)
        },
        { default: () => '详情' }
      )
    ]);
  },
  align: 'center'
}

2、NTag

{
  key: 'status',
  title: '合同状态',
  align: 'center',
  width: 80
  render(row: dicContraFranchisees.Info) {
    if (row.bothUpload === 0 || [0, 2, 6].includes(row.status)) {
      return <NTag type="warning">{row.txt}</NTag>; // 未上传合同, 未签约,审批驳回，已到期
    } else if (row.status === 7) {
      return <NTag>{row.txt}</NTag>; // 已作废
    }
    return <NTag type="info">{row.txt}</NTag>;
  }
},

3、NIcon

使用方法一：使用ionicons5图标
import { CheckmarkCircle } from '@vicons/ionicons5';

return h(
  'div',
  {
    class: 'flex text-14px mb-50px mt-10px'
  },
  [
    h(NIcon, {
      component: CheckmarkCircle,
      color: '#53C24E',
      size: 20
    }),
    h('span', { class: 'ml-5px' }, message)
  ]
);

使用方法二：使用阿里云图标  row.expand.icon为图标 font Class中的名称

{
  key: 'icon',
  title: '图标',
  width: 60,
  align: 'center',
  render(row) {
    return h(NIcon, null, {
      default: () => {
        return h('i', {
          class: `${row.expand.icon} iconfont`,
          style: { color: '#BCC2CD' }
        });
      }
    });
  }
},

4、复选框

{
  type: 'selection',
  width: 40,
  disabled(row: ApiVehicleList.data) {
    return row.deleteType === 0;
  }
}

5、图片

{
  key: '',
  title: '车型图',
  width: 50,
  render(row: any) {
    const lists = row.images;
    let value: any = [];
    if (lists) {
      lists.forEach((item: string) => {
        const imgs = h(NImage, {
          width: 70,
          height: 42,
          style: 'width: 70px; ',
          src:  'http://xxxxxxx',
          objectFit: 'fill'
        });
        value.push(imgs);
      });
    } else {
      value = [];
    }
    return h('div', { class: 'flex justify-center items-center w100% h100%' }, value);
  }
},

6、NSwitch：更改成功后已修改列表值，需重新请求列表

{
  key: 'state',
  title: '状态',
  align: 'center',
  width: 120,
  render: (row: dicContraTemplates.Info) => {
    return h(
      NSwitch,
      {
        value: row.state === 1,
        onUpdateValue: () => accountStatusSwitchChange(row),
        loading: row.loading,
        disabled: permissionBtn.value.updateStatus
      },
      {
        checked: () => {
          return '启用';
        },
        unchecked: () => {
          return '停用';
        }
      }
    );
  }
}

7、NPopover 弹出信息

{
  key: 'leaseTermFormer',
  title: '原租期订单',
  align: 'center',
  render: (row: any) => {
    return h('div', { class: 'flex justify-center' }, [
      h('span', `￥${row.totalSum}`),
      row.rentalDetailsList
        ? h(
            NPopover,
            {},
            {
              default: () => {
                return h('div', { class: 'max-w-400px flex' }, [
                  h(
                    'div',
                    { class: 'flex' },
                    row.rentalDetailsList.map((item: any) => {
                      return h('div', { class: '' }, [
                        h('div', { class: 'b b-#297cf7 b-rd-10px text-center p5px' }, [
                          h('div', item.date),
                          h('div', item.dateName)
                        ]),
                        h('div', { class: 'text-center' }, `￥${item.dailyRental}`)
                      ]);
                    })
                  )
                ]);
              },
              trigger: () => {
                return h('span', { class: 'text-#297cf7 ml-10px' }, '明细');
              }
            }
          )
        : ''
    ]);
  }
}

 8、展开项

{
  key: '', // 用于展开
  title: '',
  width: 75
},