vue中.render的使用，element-ui里el-table组件动态渲染，jsx语法

难易程度 最易⭐️    难⭐️⭐️⭐️⭐️⭐️  

一：demo的使用：

方式一：（⭐️正常写死）

<h3>方式一</h3>
      <el-table :data="tableData"> 
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
data() {
  return  {
    tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
 }
}

方式二：（⭐️⭐️使用column变量）

<h3>方式二</h3>
      <el-table :data="tableData"> 
        <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
              <my-render v-if="item.render" :render="item.render"></my-render>
              <span v-else>{{ scope.row[item.prop] }} </span>
          </template>
        </el-table-column>
      </el-table>

data() {
  return  {
    tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
    tableColumns: [{prop: 'name', label: '名字'},{prop: 'age', label: '年龄'}]
 }
}

方式三：（⭐️⭐️⭐️使用column变量 + 自定义组件）

<h3>方式三</h3>
      <el-table :data="tableData"> 
        <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
              <my-render v-if="item.render" :render="item.render"></my-render>
              <span v-else>{{ scope.row[item.prop] }} </span>
          </template>
        </el-table-column>
      </el-table>

import myRender from "./component/my-render.vue"
components: {
    myRender
},
data() {
  return  {
    tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
    tableColumns: [{prop: 'name', label: '名字'},{ label: '年龄',render: (h, param) => {return param.row.age;}}]
 }
}

my-render组件   my-render.vue 

<script>
    export default {
        render: (h, ctx) => {
            let elem = <div>{ctx.props.render(h)}</div>;
            return (elem)
        }
    };
</script>

 方式四：（⭐️⭐️⭐️⭐️使用column变量 + 自定义组件 + 传参params的使用）

<h3>方式三</h3>
      <el-table :data="tableData"> 
        <el-table-column v-for="(item, index) in tableColumns" :key="index" :prop="item.prop" :label="item.label">
          <template slot-scope="scope">
              <my-render v-if="item.render"  :sc="scope" :row="scope.row" :render="item.render"></my-render>
              <span v-else>{{ scope.row[item.prop] }} </span>
          </template>
        </el-table-column>
      </el-table>

import myRender from "./component/my-render.vue"
components: {
    myRender
},
data() {
  return  {
    tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
    tableColumns: [{prop: 'name', label: '名字'},{ label: '年龄',render: (h, param) => {return param.row.age;}},// 4、⭐️⭐️⭐️⭐️动态插入标签 + 动态属性值 + 动态属性 + 动态data值 
        {
            label: '操作',
            render: (h, param) => {
                let  redBtn= 'redBtn', bg= 'yellow';
                const elem = <div><button class={redBtn} style={{background: bg}}>删除{param.row.name}</button></div>;
                return (elem);
            }
        },]
 }
}

my-render组件   my-render.vue  

<script>
    export default {
        functional: true,
        props: {
            row: {
                type: Object,
                required: true
            },
            render: {
                type: Function,
                required: true
            },
            sc: {
                type: Object,
                required: true
            }
        },
        render: (h, ctx) => {
            const arr = [];
            const params = {
                row: ctx.props.row,
                index: ctx.props.sc.$index
            };
            const VNode = ctx.props.render(h, params);
            arr.push(VNode);
            return h('div', arr, '');
        }
    };
</script>

二、demo里的方式四的tableColumns的使用写法详解：

      windowName: "cxl",
      tableData: [{name: '王小虎',age: 18}, {name: '王小虎',age: 18}],
      tableColumns: [
        // 1、⭐️直接显示 
        {prop: 'name', label: '名字'},
        // 2、⭐️⭐️添加字符串转换显示 
        {
            label: '年龄',
            render: (h, param) => {
                return param.row.age;
            }
        },
        // 3、⭐️⭐️⭐️动态插入标签显示
        {
            label: '操作',
            render: (h, param) => {
                const elem = <div><button>新增</button></div>;
                return (elem);
            }
        },
        // 4、⭐️⭐️⭐️⭐️动态插入标签 + 动态属性值 + 动态属性 + 动态data值 
        {
            label: '操作',
            render: (h, param) => {
                let  redBtn= 'redBtn', bg= 'yellow';
                const elem = <div><button class={redBtn} style={{background: bg}}>删除{param.row.name}</button></div>;
                return (elem);
            }
        },
        // 5、⭐️⭐️⭐️⭐️⭐️【之jsx写法a】动态插入标签 + 事件显示 
        {
            label: '操作',
            render: (h, param) => {
                let that = this;
                function logFunc() {
                  // console.log("点击删除" + param.row.name, that.windowName)
                  console.log("点击", param) // = {"row": {"name": "王小虎","age": 18},"index": 0}
                }
                const elem = <div><button  onClick={logFunc}>删除</button></div>;
                return (elem);
            }
        },
        // 5、⭐️⭐️⭐️⭐️⭐️【之render函数写法b】动态插入标签 + 事件显示  
        {
            label: '操作',
            render: (h, param) => {  // params是操作返回的 
                const delBtn = h('button', {
                    class: 'operate-btn',
                    domProps: {
                        innerHTML: '删除'
                    },
                    on: {
                        click: () => {
                          // console.log("点击删除" + param.row.name, that.windowName);
                          console.log("点击", param) // = {"row": {"name": "王小虎","age": 18},"index": 0}
                        }
                    }
                });
                return h('div', [delBtn]);
            }
        },
      ]

三、demo里方式四里my-render组件，自定义render组件的写法详解

1、直接返回function

render: (h, ctx) => {
            let elem = <div>{ctx.props.render(h)}</div>;
            return (elem)
        }

2、返回function + params 

props: {
            row: {
                type: Object,
                required: true
            },
            render: {
                type: Function,
                required: true
            },
            sc: {
                type: Object,
                required: true
            }
        },
        render: (h, ctx) => {
            const arr = [];
            const params = {
                row: ctx.props.row,
                index: ctx.props.sc.$index
            };
            const VNode = ctx.props.render(h, params); //parmas 可以把参数传回给二中的tableColumns使用，
            arr.push(VNode);
            return h('div', arr, '');
        },

tableColumns: [
        // 4、⭐️⭐️⭐️⭐️ 操作parmas
        {
            label: 'parmas',
            render: (h, param) => {
                const elem = <div>{param.index} {JSON.stringify(param.row)} </div>;
                return (elem);
            }
        },