vue 使用过滤器filters 来显示不同的tag

一、展示

 

 

 

 

二、代码展示

 

   <el-table-column show-overflow-tooltip label="状态">

        <template #default="{ row }">

          <el-tooltip

            :content="row.status"

            class="item"

            effect="dark"

            placement="top-start"

          >

            <el-tag :type="row.status | statusFilter">

              {{ row.status }}

            </el-tag>

          </el-tooltip>

        </template>

      </el-table-column>

<script>

export default {

filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger',
        }
        return statusMap[status]
      },
    },
}