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

Posted 夏冬青

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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表格 是否启用 状态显示的主要内容,如果未能解决你的问题,请参考以下文章

Angular框架中使用ng-zorro-antd实现可编辑的table表格

vue如何获取表格某行数据

共享单车—— React后台管理系统开发手记:AntD Table基础表格

antd vue里面 a-table再次封装,slot-scope如何跨组件传递?

table表格怎么使用vue写一个消息未读的状态?

antd-vue 表格,固定左边第一列,设置滚动,有滚动条,第一列被隐藏