ant design vue中a-table中使用a-tag和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>

猜你喜欢

转载自blog.csdn.net/anny_mei/article/details/116696519
今日推荐