zoukankan      html  css  js  c++  java
  • iview表格中的render封装( 仅限于表格渲染数据嵌套时使用 )

    iview表格中的render

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

    当定义的元素没有其他元素时:
    render:(h,params) => {
      return h(" 定义的元素 ",{ 元素的性质 }," 元素的内容")}
    
    render:(h,params)=>{
        return h('div', {style:{'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 ? "未开启" : "开启");}
  • 相关阅读:
    图片垂直居中的方法(适合只有一行文字和图片)
    微信小程序 this.setData() 详解
    phpstorm 2017激活码(方法)
    WebSocket 协议 详解
    容器装不下内容时,显示滚动条
    Restore IP Addresses
    Reverse Linked List II
    Subsets II
    Decode Ways
    Gray Code
  • 原文地址:https://www.cnblogs.com/home-/p/11820438.html
Copyright © 2011-2022 走看看