ant design vue中表格指定格式渲染

最新推荐文章于 2024-08-12 05:07:15 发布

只爱吃菜不吃饭

最新推荐文章于 2024-08-12 05:07:15 发布

阅读量3.6w

点赞数 11

分类专栏： ant 文章标签： ant design vue 表格指定方式渲染

本文链接：https://blog.csdn.net/qq_42597536/article/details/90256530

版权

本文介绍了在Ant Design Vue中如何实现表格数据的指定格式渲染，包括两种方法：一是通过定义渲染函数，二是利用插槽模板直接调用。特别提醒，为了保证渲染正常，定义的columns必须放在data中。

摘要由CSDN通过智能技术生成

注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别

渲染方法1：

指定渲染函数：

const columns = [
      {
        title: '排名',
        dataIndex: 'key',
        customRender: renderContent // 渲染函数的规则
      }, {
        title: '搜索关键词',
        dataIndex: 'keyword',
        customRender: (text, row, index) => {
            if (index < 4) { // 前4行数据以a标签的形式被渲染
              return <a href="javascript:;">{text}</a>
            }
            return { // 否则以独占4列的文本形式被渲染
              children: text,
              attrs: {
                colSpan: 4
              }
            }
        }
      }
]
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {}
  }
  return obj
}

渲染方法2：

直接调用对应插槽模板：