封装element table表格 使用render函数

目的：使其table中得每个单元格都能做到自定义

新建一个组件 STable.vue

<template>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        v-for="item in columns"
        :key="item.key"
        :prop="item.key"
        :label="item.title"
        width="180">
        <template slot-scope="scope">
        <ex-slot v-if="item.render" :render="item.render" :row="scope.row" :index="scope.$index" :column="item" />
        <span v-else>{{ scope.row[item.key] || '-' }}</span>
      </template>
      </el-table-column>
    </el-table>
</template>

<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 {
    components: {
        exSlot,
    },
    props:{
            columns:{
                type:Array,
                default:()=>[]
            },
            list:{
                type:Array,
                default:()=>[]
            }
        },
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      } 

}
</script>


  

  
<style></style>

使用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <STable :columns="columns" :list="list"/>
  </div>
</template>

<script>
import STable from './STable.vue'

export default {
  name: 'app',
  data(){
    return{
      columns:[
        {
          title:"姓名",
          key:"name",
          align:"center"
        },
        {
          title: "年龄",
          key: "age",
          align: "center"
        },
        {
          title: "地址",
          key: "address",
          align: "center"
        },
        {
          title: "操作",
          key: "caozuo",
          align: "left",
          render:(h,params)=>{
            if (!params.row.operations||params.row.operations.length === 0) {
									return h('div', '')
								}
            let arr = []
            params.row.operations.forEach(type => {
              arr.push(h("el-button",{
              props: {
                type:"primary",
                icon:"el-icon-edit"
              },
              on:{
                click:()=>{
                  alert("执行了",JSON.stringify(params.row),type)
                }
              }
            },this.getType(type)))
            })
            return h('div',arr)
          }
        },
      ],
      list:[
        {
          name:"yangjie",
          age:18,
          address:"aaaa",
          operations:[0]
        },
        {
          name:"junchi",
          age:33,
          address:"bbb",
          operations:[2]
        },
        {
          name:"haojie",
          age:45,
          address:"ccc",
          operations:[]
        },
        {
          name:"king",
          age:59,
          address:"dddd",
          operations:[1,0]
        },
      ],
    }
  },
  methods: {
     getType(type){
       if(type === 0){
         return "修改"
       }else if(type === 1){
         return "删除"
       }else if(type === 2){
         return "重置"
       }
      
     }
  },
  components: {
    STable
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>