ant design vue表格中的某一列根据数值显示不同的内容

今天使用ant design vue进行开发时，使用a-table标签做一个表格，表格的数据是通过后端接口进行获取的，但是发现一个渲染上的问题

我做的表格样式如下，在接受这一栏，我接受的数据是0或者1，但是我要渲染成成功或者失败，，研究了好久怎么做。下面说一下解决的方法。

第一种解决方法：适用于仅仅改变显示的内容，比如从0、1变成‘成功’、‘失败’。

ant design vue的表格使用时要用一个column数组来定义表格的列名，也就是表头，可以在定义列名的时候，进行一步转化，使他渲染的数据不一样，使用的是customRender函数，在定义列的时候直接写，就像下边写的一样

export const columns = [
    {
        title: '模块名称',
        dataIndex: 'module',
        key:'module',
        width: 100,
        align: 'left'
    },
    {
        title: '类型',
        dataIndex: 'type',
        key:'type',
        width: 80,
    },
    {
        title: '数据ID',
        dataIndex: 'data',
        key:'data',
        width: 80,
    },
    {
        title: '接收',
        dataIndex: 'izSuccess',
        key:'izSuccess',
        width: 70,
    },
    {
        title: '数量',
        dataIndex: 'amount',
        key:'amount',
        width: 70,
    },
    {
        title: '跳过',
        dataIndex: 'izSkip',
        key:'izSkip',
        customRender:(text, record, index)=>{
            if(text.value == 1){
                return '是'
            }
            else{
                return '否'
            }
        },
        width: 70,
    },
    {
        title: '执行次数',
        dataIndex: 'execCount',
        key:'execCount',
        width: 80,
    },
    {
        title: '重试',
        dataIndex: 'izRetry',
        key:'izRetry',
        customRender:(text, record, index)=>{
            if(text.value == 1){
                return '是'
            }
            else{
                return '否'
            }
        },
        width: 70,
    },
    {
        title: '重试接口',
        dataIndex: 'retryInterfaceType',
        key: 'retryInterfaceType',
        width: 80,
    },
    {
        title: '时间',
        dataIndex: 'createTime',
        key:'createTime',
        width: 150,
    },
];

 看重试的那一列的操作，将0，1渲染为是否，在显示的时候就可以成功了。

方法二：适合表格中还需要加入一些dom元素，就像例图中的小绿点一样

这种情况通过第一种方式无法改变dom结构，只能改变表格中显示的文字内容，添加不了标签，这时候可以在vue文件中的a-table标签中进行操作。

<a-table :columns="dataColumns" :scroll="{x:1200}" :data-source="dataList" :expand-column-width="50" :row-key="(record) => record.id" @expand="zi" :expandedRowKeys="expandedRowKeys" :pagination="false">

        <!-- 配置列显示内容 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'izSuccess'">
            <div v-if="record.izSuccess == 1">
              <a-badge status="success" style="vertical-align: middle" />
              成功
            </div>
            <div v-if="record.izSuccess == 0">
              <a-badge status="error" style="vertical-align: middle" />
              失败
            </div>
          </template>
        </template>
</a-table>

在a-table标签中加入一个template标签，标签中写入

#bodyCell="{ column, record }"

此时应该是在渲染时拿出了要渲染的那一行数据，这个record就是要渲染的数据。

在里边再嵌套一层template标签，在标签中加入v-if进行判断，判断column的key值等于你要改变渲染的值的那一列的key。

在其中就可以定义你想显示在那一列的结构，示例代码就是加入了一个a-badge的小徽章，也就是这个小绿点，v-if是用来进行判断的，如果这个值是1，加入的是小绿点并且显示成功，如果值为1，加入的是小红点并且写入失败。

特别注意：在规定列的时候，一定要规定好key值，不然会出现key值重复的问题，也就是在展开的时候，点击一行的展开按钮所有的就都展开了，如果列数据没有规定key值，可以荣国代码将其他的具有区分度的值代替key值，具体代码是在a-table标签中增加一个属性，:row-key="(record) => record.id" ，这样就吧record.id设置为key了。