zoukankan      html  css  js  c++  java
  • vue+iview如何通过render对table中的数据进行相关操作1、通过render对table中的数据进行相关操作

      对于表格类信息,通常存在后台返回的信息与前端显示信息的不同.
    例如:(1)状态存在"运行"和"停止"两种形式,但是后台返回的为"0"和"1";(2)后台返回的时间展示形式与前端需要展示的形式不同,需要进行相关修改。
      为解决这一问题,我们将通过render对数据格式进行修改:

    <template>
        <div>
            <Table :data="tableData" :columns="tableColumns"></Table>
        </div>
    </template>
    
    <script>
        import ...  
        
        export default{
            name:'vuefilename',
            data(){
                return{
                    tableColumns:[
                        {title:'IP',type:'ip',align:'center',170},
                        {title:'名称',type:'name',align:'center',170},
                        {title:'类型',type:'type',align:'center',170,
                        render:(h,params)=>{
                                //可在此处添加判断或对数据的相关操作,例如下面操作
                                let typeData = params.row.type;
                                if(typeData == '0'){
                                    typeData = '否'
                                }else{
                                    typeData = '是'
                                }
                                return h('span',typeData)
                            }
                        },
                        {title:'说明',type:'comment',align:'center',170}
                    ],
                    tableData:[{"ip":"1111","name":"名称1","type":"1","comment":"说明1"},
                        {"ip":"1111","name":"名称1","type":"0","comment":"说明1"},
                        {"ip":"1111","name":"名称1","type":"1","comment":"说明1"},
                        {"ip":"1111","name":"名称1","type":"1","comment":"说明1"}
                    ]
                }
            }
        }
    </script>
  • 相关阅读:
    UVA 3942 Remember the Word (Trie+DP)题解
    POJ 3630 Phone List(字符串前缀重复)题解
    HDU 1247 Hat’s Words(字典树)题解
    hdu 1671 Phone List(字典树)题解
    HDU1251 统计难题 (字典树模板)题解
    BZOJ 1556 墓地秘密
    BZOJ 3624 免费道路
    BZOJ 2286 消耗战
    BZOJ 3694 最短路
    BZOJ 1589 采集糖果
  • 原文地址:https://www.cnblogs.com/qing0228/p/13821697.html
Copyright © 2011-2022 走看看