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 ? "未開啟" : "開啟");}