iView中render用法总结
场景
在列表数据当中,当我相对列表中某一个单元格进行操作的时候,我可以可以使用render函数来灵活的改变单元格的样式,或者是显示的文本,亦可以让单元格可以直接编辑
1. 枚举数字转换成中文释义
//前面代码可以省略 export default { data() { const _self = this; return { statusEums : { 1 : "待执行", 2 : "执行中", 3 : "已完成", 4 : "废除" }, orderList:[], colums : [ { title : "序号", type : "index", }, { title: "状态", key: "status", //如果接口返回的是中文可以直接显示 width: 80 , //单元格宽度 align: 'center', //样式居中 render: (h ,data) => { return h ('span' , _self.statusEums[data.row.status]); //处理之后 返回的是对应的中文意思 } }, { title : '完成率', key : 'prencentage', render: (h , data) => { let suffiex = ""; if(data.row.precentage != null) { suffiex = data.row.precentage + "%"; } return h ('input' , suffiex) } } ] } } }
2. 可以操作的输入框
//前面代码可以省略 export default { data() { const _self = this; return { orderList:[], colums : [ { title:"备注(处置情况)", key:"content", align:'center', render: (h, data) => { return h("div", [ h("Input", { props: { value:data.row.content }, //值变更事件 on: { input: newValue => { data.row.content = newValue; _self.orderList[data.index].content = newValue; //更新当前列的数据 } } }) ]); } }, ] } } }
3. 下拉选(可编辑的)
export default { data() { return { shippingMap:[], //接口返回的单位数据,用于做下拉选项目 { title:"运输单位名称", key:"shippingId", align:'center', width:190, render: (h, data) => { var _options = _self.shippingMap.map(item =>{ return h("Option", { props: { value: item.id, key: item.id, label: item.orgName } }); }) return h( "Select", { style: { width: "180px" }, props: { filterable: true, size: "small", transfer: true, value:_self.orderList[data.index].shippingId }, on: { "on-change": function(v) { _self.orderList[data.index].shippingId = v; } } }, _options ); } }, } }}
4. 可跳转的的a标签
export default { data() { return { colums: [ //这种是a便签根据url定向跳转,还可以通过点击事件路由跳转 { title: "文件路径", render: (h, data) => { return h('a' , { style: { color: red, textDecoration: 'underline' }, attrs: { title: data.row.title, href: data.row.path, target : '_blank', } } , data.row.title) } }, { title: "点击跳转", key: 'courseno', render: (h ,data) => { return h ('a' , { style:{ color: blue, }, on : { click: function() { this.$router.push({name: "course-detail" ,params:{ id : data.row.id}}) } } }, data.row.courseno) } } ] } }}
点击咨询 