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>
  • 相关阅读:
    二级菜单
    侧面导航
    QFileDialog文件保存
    GitHub for window
    Qt学习事件/信号
    开始RTThread之旅
    Qt事件过滤器
    LPC1768开发板液晶问题解决
    用QSplitter分裂器实现QTextEdit窗口大小的变化
    Qt之串口编程使用事件驱动来触发接收数据
  • 原文地址:https://www.cnblogs.com/qing0228/p/13821697.html
Copyright © 2011-2022 走看看