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

最新推荐文章于 2024-12-16 11:27:35 发布

uglyduckling0412

最新推荐文章于 2024-12-16 11:27:35 发布

阅读量1.6k

点赞数 2

分类专栏：技术档案文章标签： ui 前端

本文链接：https://blog.youkuaiyun.com/uglyduckling0412/article/details/131438996

版权

技术档案专栏收录该内容

39 篇文章

订阅专栏

在Vue3结合NaiveUI的表格组件中，可以通过自定义渲染函数在表格的一列中添加多个操作按钮。具体做法包括声明存储按钮信息的数组，然后在配置createColumns时使用map函数，通过判断和渲染逻辑来创建不同的按钮，点击事件分别绑定不同的处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

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<Resume> => {
  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
      }
    }
  ]
}