关于vue使用render函数，封装一个完整的table表格,基于elementui

前言：在做后台管理系统的时候，小伙伴经常会遇到多个页面会使用到表格，我们如果不进行封装的话，那么每个页面都得引用一次，并且书写一定的样式。所以，在这里我做了一个简装的基于elementui封装的表格。技术不好 ，望理解。

1.子组件

<el-table
  :data="data">
   <el-table-column
     v-for="(col, index) in rowHeader"
     :key="index"
     :prop="col.prop"
     :label="col.label"
     align="center">    
     <template slot-scope="scope">
         <ex-slot
           v-if="col.render"   
           :render="col.render"
           :row="scope.row"
           :index="scope.$index"
           :column="col">
         </ex-slot>
         <span v-else>
             {{scope.row[col.prop]}}
         </span>
     </template>
   </el-table-column>
 </el-table>
 //这里是循环我们的表头，会将表头值传入,会进行判断如果自己有进行自定义render的话，那么就采用render方式，否则渲染prop值

<script>
  // 自定义内容的组件
  var exSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) params.column = data.props.column
      return data.props.render(h, params)
    }
  }
  export default {
    props: {
      // 表格数据
      data: {
          type: Array,
          default: () => {
              return []
          }
      },
      // 表头数据
      rowHeader: {
          type: Array,
          default: () => {
              return []
          }
      }
    },
    data(){
      return{

      }
    },
    methods:{
    },
    mounted() {
    },
    //自定义组件
    components: {
      'ex-slot': exSlot
    },
  }
</script>

2.父组件中

//引入
import Excel from '@/components/common/excel.vue'      
//注册  
components:{ Excel }
//使用
 <Excel
   :data="list"
   :rowHeader="rowHeader"
 />
 //传入相应的值，表格数据list、头部数据rowHeader
 <script>
 	export  default{
   		data(){
	      	return{
				 list:[
					     {
					       id:1001,
					       title:'这是什么,超过20个字缩略',
					       lable:'随手晒',
					       time:'2020-5-6',
					       name:'大白熊',
					       state:1,
					       img:"http://img3.imgtn.bdimg.com/it/u=1986451467,394304688&fm=26&gp=0.jpg",
					     }
	  				 ],
  				rowHeader:[
       				//没有经过处理的
       				{
		            	prop: 'lable',
		            	label: '标签'
			        },
			        //经过处理的
			        {
			            prop: 'state',
			            label: '操作',
            			render: (h, params) => {
              				if(params.row.state === 1){
                				return h('el-button',{
				                  on: {
				                    click: () => {
				                      console.log(this.alert)
				                    }
                  				 },
				                  domProps:{
				                    innerHTML:'删除'
				                  }
                			})
              				}else if(params.row.state === 2){
				                return h('el-button', '清空', {
				                  on:{
				                    click:this.remove(params.row)
				                  }
				                })
              				}
            			}
         			 }
        		  ],
       			]
			}
	}
 </script>
 

tips:通过render自主放入自己需要用的东西
render创建子节点，在第三个属性中去render
栗子:

{
            prop: '',
            label: '内容',
            render: (h, params) => {
              return h('div',{
                class:{
                  info:true
                },
                style:{
                  display:'flex',
                },
              },
              [
                //左侧
                h('div',{
                  class:{
                    infoLeft:true
                  },
                },
                [
                  h('img',{
                    attrs:{
                      src:params.row.img
                    },
                    style:{
                      display:"block",
                      width:"30px",
                      height:"30px"
                    }
                  })
                ]
                ),
                //右侧
                h('div',{
                  class:{
                    infoRighe:true
                  },
                  style:{
                    display:"flex",
                    flexDirection:'column',
                    paddingLeft:"10px",
                    textAlign:"left"
                  }
                },
                [
                  h('p',{
                    domProps:{
                      innerHTML:params.row.title
                    },
                  }),
                  h('p',{
                    domProps:{
                      innerHTML:'ID:'+ params.row.id
                    },
                  })
                ]
                ),
              ]
              )
            }
          },

详细用法见:使用render函数创建button按钮

最后看下效果图