naive ui 数据表格操作加入两个按钮解决办法

问题:

vue3+naive ui 的table表单中操作加入两个按钮,官方没有示例,自己研究出了个办法

解决办法

参考tags多项放到一个列中的方法

1、先声明一个数组,存储要放的按钮信息

 const actionsArr: actions[] = [
  {
    title: '审核',
    key: 'checkState'
  },
  {
    title: '查看',
    key: 'check'
  }
]

2、配置createColumns时render(row)部分使用map,代码:

const createColumns = ({
  check,
  checkState
}: {
  check: (rowData: Resume) => void
  checkState: (rowData: Resume) => void
}): DataTableColumns => {
  return [
    {
      title: '序号',
      key: 'index'
    },
    {
      title: '姓名',
      key: 'name'
    },
    {
      title: '性别',
      key: 'sex',
      render(row) {
        if (row.sex === '0') {
          return '女'
        } else {
          return '男'
        }
      }
    },
    {
      title: '身份证号',
      key: 'idNumber'
    },
    {
      title: '手机号',
      key: 'telNumber'
    },
    {
      title: '审核状态',
      key: 'checkState',
      render(row) {
        const tags = row.checkState
        if (tags === 2) {
          return h(
            NTag,
            {
              style: {
                color: 'green',
                background: 'none'
              },
              bordered: false
            },
            {
              default: () => '通过'
            }
          )
        } else if (tags === 1) {
          return h(
            NTag,
            {
              style: {
                color: 'red',
                background: 'none'
              },
              bordered: false
            },
            {
              default: () => '未通过'
            }
          )
        } else {
          return h(
            NTag,
            {
              style: {
                color: '#ccc',
                background: 'none'
              },
              bordered: false
            },
            {
              default: () => '未审核'
            }
          )
        }
      }
    },
    {
      title: '操作',
      key: 'actions',
      render(row) {
        const buttonGroup = actionsArr.map((item) => {
          return h(
            NButton,
            {
              size: 'small',
              style: {
                marginRight: '6px'
              },
              onClick: () => {
                if (item.key === 'check') {
                  check(row)
                } else {
                  checkState(row)
                }
              }
            },
            {
              default: () => item.title
            }
          )
        })

        return buttonGroup
      }
    }
  ]
}

最后实现结果:

在这里插入图片描述

如果你有什么更好的办法,发出来一起学习呀!!!

你可能感兴趣的:(技术档案,ui,前端)