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

     

  • 相关阅读:
    HDU 3572 Task Schedule(拆点+最大流dinic)
    POJ 1236 Network of Schools(Tarjan缩点)
    HDU 3605 Escape(状压+最大流)
    HDU 1166 敌兵布阵(分块)
    Leetcode 223 Rectangle Area
    Leetcode 219 Contains Duplicate II STL
    Leetcode 36 Valid Sudoku
    Leetcode 88 Merge Sorted Array STL
    Leetcode 160 Intersection of Two Linked Lists 单向链表
    Leetcode 111 Minimum Depth of Binary Tree 二叉树
  • 原文地址:https://www.cnblogs.com/huanhuan55/p/9867182.html
Copyright © 2011-2022 走看看