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 ? "未开启" : "开启");}
  • 相关阅读:
    禁止ios10双指缩放
    使用uglifyjs压缩JS
    数组深拷贝的方法
    websocket具体如何使用
    订单支付倒计时-剩余时间xx小时xx分xx秒
    css--内凹圆角
    jQuery 演变史
    手机新闻网页
    [译文]此像素非彼像素,非彼像素
    函数有一个特殊的属性 prototype!
  • 原文地址:https://www.cnblogs.com/home-/p/11820438.html
Copyright © 2011-2022 走看看