本文主要是介绍antd+vue table表格 是否启用 状态显示，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

antd+vue table表格 是否启用 状态显示

小功能记录一下：
单元格里面两个状态或者三个状态切换显示问题。官网里tag标签都是同时展示两个或三个，我这里是根据状态展示对应状态标签。
通过试用v-if来控制显示标签，颜色样式自己设置。

这里展示的是部分代码

<template>
  <a-table :columns="columns" :data-source="data">
    <template slot="name" slot-scope="text">
      <a>{{ text }}</a>
    </template>
    
    //这是第一种，三个状态标签
    <template slot="status" slot-scope="text">
      <span v-if="text === '1'"><a-tag >待上传</a-tag></span>
      <span v-else-if="text === '2'"><a-tag color="#87d068">未下载</a-tag></span>
      <span v-else><a-tag color="cyan">已下载</a-tag></span>
    </template>
    
    //这是第二种两个状态
    <template slot="status" slot-scope="text">
      <span v-if="text === '1'"><a-tag color="green">启用</a-tag></span>
      <span v-else><a-tag color="red">停用</a-tag></span>
    </template>
    
 </a-table>
</template>

<script>

//这里是表头定义设置
const columns = [
  {
    title: '名称',
    dataIndex: 'Name',
  },
  {
     title: '状态',
     dataIndex: 'status',
     scopedSlots: { customRender: 'status'} //这里配置关联
  },  
]

</script>

这篇关于antd+vue table表格 是否启用 状态显示的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！