elementUI中table表格内容，将数字转换为文字tag

laoayu

已于 2023-11-09 16:05:50 修改

阅读量639

点赞数 1

文章标签： elementui 前端 vue

于 2023-11-09 15:53:56 首次发布

本文链接：https://blog.csdn.net/laoayu/article/details/134313544

版权

未设置之前样式：

目标样式：

接下来就是神奇的代码

实现功能当状态内有内容是，根据匹配转成对应的文字，当状态无内容时，则不显示tag标签。

实现方式1：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="数据" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="getTagType(scope.row.status)" :type="getTagType(scope.row.status)">{{ getTagLable(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { status: 10 },
        { status: 20 },
        { status: 30 },
        { status: null }
      ]
    }
  },
  methods: {
    getTagType(data) {
      if (data === 10) {
        return 'success';
      } else if (data === 20) {
        return 'danger';
      } else if (data === 30) {
        return 'warning';
      } else {
        return ''
      }
    },
    getTagLable(data) {
      if (data === 10) {
        return '正常（可使用）';
      } else if (data === 20) {
        return '锁定（占用）';
      } else if (data === 30) {
        return '临时锁定（预占用）';
      } else {
        return ''
      }
    },
  }
}
</script>

实现方式2：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="数据" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 10" type="success">可使用</el-tag>
          <el-tag v-else-if="scope.row.status === 20" type="danger">占用</el-tag>
          <el-tag v-else-if="scope.row.status === 30" type="warning">预占用</el-tag>
          <span v-else>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { status: 10 },
        { status: 20 },
        { status: 30 },
        { status: null }
      ]
    }
  },
  methods: {
  
  }
}
</script>

赶紧来试试吧！！！