zoukankan      html  css  js  c++  java
  • Element-table-formatter格式化数据

    1.formatter  用来格式化内容  
     对table的值进行处理。Function(row, column, cellValue, index){}

      使用formatter需要注意以下几点:
      ①无论formatter出何种形式,格式化出的DOM一定都是被包含在默认的div标签内
      ②在写formatter函数时要保证有值返回,否则单元格没有内容可展示,所以if的时候别忘了else

      ③formatter函数不会作用在列属性checkbox为true的单元格上,checkbox列是组件预留的。

    <template>
        <el-table :data="tableData3"  ref="multipleTable">
            <el-table-column type="selection" width="55" ></el-table-column>
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
             <el-table-column prop="IsAudit"  :formatter="formatterColumn" label="审核状态" ></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
    </template>
    <script>
    export default {   
        data() {
            return {
                tableData3: [{
                    id:'1',
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:0,
                    sex:'1'
                }, {
                    id:'2',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:1,
                    sex:'0'
                }, {
                    id:'3',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                    IsAudit:10,
                    sex:'-1'
                }]
            }
        },
        mounted() {
        },
        methods: {
            formatSex: function (row, column, cellValue, index) {
                return row.sex == 1 ? '' : row.sex == 0 ? '' : '未知';
            },
            //状态改成汉字
            formatterColumn(row, column) {
                switch(row.IsAudit){
                    case 0:
                        return '未通过';
                        break;
                    case 1:
                        return '审核通过';
                        break;
                    case 10:
                        return '待审核';
                        break;
                    case 9:
                        return '草稿';
                        break;
                    default:
                        return '未知';
                }
            }
        }
    }
    </script>

    这篇写的不错:https://blog.csdn.net/gao_xu_520/article/details/80049254

     

  • 相关阅读:
    C# 多线程总结 异常处理 线程取消 锁(lock)
    C# sync/async 同步/异步
    C# Parallel 多线程并发
    C# Task TaskFactory 异步线程/异步任务
    C# ThreadPool 线程池
    Nginx基础配置
    Nginx配置通用语法
    Nginx进程间的关系
    Nginx命令行控制
    Flask框架02(路由)
  • 原文地址:https://www.cnblogs.com/huanhuan55/p/9867182.html
Copyright © 2011-2022 走看看