ant design vue中a-table中使用a-tag和a-switch

最新推荐文章于 2024-11-25 19:06:53 发布

原创最新推荐文章于 2024-11-25 19:06:53 发布 · 1.1w 阅读

18 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

ant

本文介绍了一种使用a-tag和a-switch组件的方法，通过具体示例展示了如何在表格中根据不同条件显示不同颜色的标签，并利用a-switch实现开关功能。

该文章已生成可运行项目，

a-tag效果图如下
在这里插入图片描述
在data里面直接赋值

 columns: [
        {
          title: '疫区状态',
          width: 100,
          dataIndex: 'yiqu',
          key: 'yiqu',
          key: 'age',
          fixed: 'left',
          customRender: (text, record, index) => {
            return text == 1 ? <a-tag color="red">疫区</a-tag> : <a-tag color="green">非疫区</a-tag>
          }
        },
      ],

a-switch使用效果图
在这里插入图片描述

        <a-table
                  :columns="columns"
                  :data-source="data"
                  :pagination="leftPage"
                  :customRow="customRowClick"
                  :loading="leftLoading"
                  :scroll="{ x: 1500, y: 300 }"
                  class="table_box"
                >
                  <span slot="quyang" slot-scope="text, record">
                    <a-switch
                      checked-children="是"
                      un-checked-children="否"
                      :checked="record.quyang === '1' ? true : false"
                      @change="handelQuYangChange(record)"
                    />
                  </span>
            </a-table>

本文章已经生成可运行项目