Vue中el-table组件的值转换

谁践踏了优雅 2022-09-05 06:28 546阅读 0赞

在el-table组件中,字段值的转换有多种实现方式:  
1.使用template标签加\{ \{\}\}表达式使用js方法对字段值进行转换。  
2.直接使用el-table-column组件中的:formatter属性使用js方法对值进行转换。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTY5MTgz_size_16_color_FFFFFF_t_70][]

### 示例代码 ###

<el-table-column label="货物状态" align="left" prop="status" width="80px">
    	<template slot-scope="scope">
    	  <span>{
       { changeStatusValue(scope.row.status, statusOptions) }}</span>
    	</template>
    </el-table-column>
    
    <el-table-column label="状态" align="center" prop="status" :formatter="parseStatus"/>
    
    methods: {
    	changeStatusValue(index, enums) {
          for (var i = 0; i < enums.length; i++) {
            if (enums[i].value === index) {
              return enums[i].label;
            }
          }
        },
        parseStatus(row) {
          return row.status == 1 ? '有效' : row.status == 2 ? '无效' : '';
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5NTY5MTgz_size_16_color_FFFFFF_t_70]: /images/20220829/ad3f95a91a3d4b69916538b7b0a3f193.png

发表评论取消回复

表情：

评论列表（有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue组件传值

父组件向子组件传值通过`v-bind` ![在这里插入图片描述][20200223152103416.png] 子组件向辅助间传值通过`this.$emit()`

逃离我推掉我的手/ 2023年07月07日 12:36/ 0 赞/ 69 阅读

相关 Vue组件传值

子组件中，默认情况下无法访问到父组件中data上的数据和methods中的方法父组件向子组件传值 1. 定义子组件，props中设置需要父组件传入的参数名 2.

末蓝、/ 2023年06月26日 12:27/ 0 赞/ 82 阅读

相关 vue组件传值

> 1. 计算属性和方法的区别：计算属性中不会添加重复内容；方法添加会重复添加 > 2. 生命周期中的销毁：普通的显示隐藏`v-show`并不是销毁,只是将元素隐藏 > 3

た入场券/ 2023年06月15日 14:25/ 0 赞/ 72 阅读

相关 vue 组件传值

父传子一、父传子 1.分发事件props和$emit(方法1) 2.$ listeners和$ attrs(方法2

妖狐艹你老母/ 2022年12月15日 03:39/ 0 赞/ 294 阅读

相关 Vue组件间的传值

Vue父子组件间的通信：props、 r e f 、 ref、 ref、emit 1. 通过prop实现通信静态传值：父组件调用子组件时绑定属性：`<v

分手后的思念是犯贱/ 2022年10月02日 05:40/ 0 赞/ 271 阅读

相关 Vue中el-table组件的值转换

在el-table组件中,字段值的转换有多种实现方式: 1.使用template标签加\{ \{\}\}表达式使用js方法对字段值进行转换。 2.直接使用el-tabl

谁践踏了优雅/ 2022年09月05日 06:28/ 0 赞/ 547 阅读

相关 Vue组件中值的传递

Vue组件中值是如何传递的？三、v-for的情况下，父组件向子组件传值两种情况如下： 1. 父组件传一个items数组——对象的集合，一次将所有的值传过去，此时fo

女爷i/ 2022年04月18日 02:54/ 0 赞/ 358 阅读

相关 Vue组件间的传值

父子组件传值父组件调用子组件时动态绑定属性：<v-header v-bind:title="title"></v-header> 子组件通过props接受父组件

我会带着你远行/ 2022年02月28日 01:12/ 0 赞/ 371 阅读

相关 Vue组件中的父子传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

阳光穿透心脏的1/2处/ 2021年11月17日 08:08/ 0 赞/ 384 阅读

相关 vue组件传值

vue组件传值-------总结 1·父组件传值子组件父组件通过 :paramsName1="params1" :paramsName2="params2"的方式将值

绝地灬酷狼/ 2021年09月17日 04:50/ 0 赞/ 532 阅读