iview表格中的render封装( 仅限于表格渲染数据嵌套时使用 )

iview表格中的render

自定义渲染列，传入两个参数，第一个是 h，第二个为对象(params所有数据)，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引

当定义的元素没有其他元素时：
render:(h,params) => { return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容")} render:(h,params)=>{ return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, '是那个地方') }

当定义的元素中要嵌套其他元素时：
render:(h,params) => {
  return h(" 定义的元素 "，{ 元素的性质 }，[元素的内容])
}

render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  style: {
                    color: "#555555"
                  }
                },
                params.row.useStatus == 0 ? "未开启" : "开启"
              )
            ]);
}

封装一点点封装，一点点学习 优化一点是一点

 

封装代码: 创建一个js文件
export default function Reavder(h, params) {
  return h("div", [
    h(
      "span",
      {
        style: {
          color: "#555555"
        }
      },
      params
    )
  ]);
}

---

main.js中引入

import renderHandel from "./common/commonRender/index.js";
给它的原型添加一个属性为$renderHandel
Vue.prototype.$renderHandel = renderHandel;

---

使用:
render: (h, params) => {return this.$renderHandel(h,params.row.useStatus == 0 ? "未开启" : "开启");}