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)          }        }      ]    }  }}

其它的可以根据上面的示例进行举一反三,大体接口相同即可