element-ui表格列el-table-column如何根据数据不同显示不同的值

最新推荐文章于 2024-05-28 13:31:59 发布

Rouqier

最新推荐文章于 2024-05-28 13:31:59 发布

阅读量7.3k

点赞数 4

分类专栏： elementUi vue.js 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/Rouqier/article/details/121920240

版权

vue.js 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

elementUi

2 篇文章 0 订阅

订阅专栏

1.可以使用插槽：slot-scope="scope"，使用判断来显示对应的状态

    <el-table>
          <el-table-column
            prop="state"
            label="状态"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.state === true">启用</span>
              <span v-if="scope.row.state === false">禁用</span>
            </template>
          </el-table-column>
    </el-table>

2.可以给el-table-column添加一个属性：formatter

<template>
    <el-table>
      <el-table-column label="状态" prop="state" :formatter="stateFormat"></el-table-column>
    </el-table>
</template>

<script>
    methods:{
      stateFormat(row, column) {
        if (row.state === true) {
          return '正确'
        } else  {
          return '错误'
        } 
      },
    }    
</script>