更改elementui内单元格的内容

最新推荐文章于 2024-08-09 11:14:56 发布

4sthuajuan

最新推荐文章于 2024-08-09 11:14:56 发布

阅读量211

点赞数 2

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/hua4st/article/details/139581431

版权

1.使用作用域插槽回传内容，更改

          <el-table-column
            prop="cardStatus"
            label="状态"
          >
            <template slot-scope="{row}">
              <span>
                {{ row.cardStatus===0?'可用':'已过期' }}
              </span>
            </template>
          </el-table-column>

2.使用formatter回传数据

          <el-table-column
            prop="cardStatus"
            label="状态"
            :formatter="cardStatusFormatter"
          >
          </el-table-column>

    // 单元格回传的数据
    cardStatusFormatter(row, column, cellValue, index) {
      const MAP = {
        0: '可用',
        1: '已过期'
      }
      return MAP[cellValue]
    }

其中row为data数据中每一个[]的内容，column为单元格，cellValue为单元格显示内容，index为序号