vue+element+table+render+slot

前言：

        最新又回忆并且整理下之前的资料，在这里共享下把，主要是element-ui框架里面对table的使用，因为element-ui不可以像我们iview框架一样可以直接的在表头里面写render函数，我这里把element-ui的table进行二次封装，这里展示他的封装文件和调用方法

实现效果图：

准备工作：

1.安装element-ui

cnpm i element-ui -s

2.main.js中配置

// 引入封装的element样式
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

实现代码：

1.封装的组件 iTable.vue , 可以直接使用

<template>
 <div class="table">
    <el-table id="iTable" :class="tableClass"
      v-loading.iTable="options.loading"
      :data="list"
      :stripe="options.stripe"
      :border="options.border"
      :highlight-current-row="options.highlightCurrentRow"
      :lazy="options.lazy"
      :height="options.height"
      :load='loadGetData'
      ref="mutipleTable"
      style='width:100%;'
      @row-click='clickRow'
      @row-dblclick='dblclickRow'
      @row-contextmenu='contextmenu'
      @header-click='headClick'
      @header-contextmenu='headcontextmenu'
      @select='select'
      @select-all='selectAll'
      @current-change='rowChange'
      @selection-change="handleSelectionChange">
      <!--region 数据列-->
      <template v-for="(column, index) in columns">

        <!--复选框（START）-->
        <el-table-column
          v-if="column.type=='selection'"
          type="selection"
          :width="column.width?column.width:60"
          :align="column.align?column.align:'center'">
        </el-table-column>
        <!--复选框（END）-->

        <!--序号（START）-->
        <el-table-column
          v-else-if="column.type=='index'"
          type="index"
          :label="column.title?column.title:'序号'"
          :width="column.width?column.width:80"
          :align="column.align?column.align:'center'">
        </el-table-column>
        <!--序号（END）-->

        <!-- slot 添加自定义配置项 -->
        <slot v-else-if="column.slot" :name="column.slot" :tit='index'></slot>

        <!-- 默认渲染列-渲染每一列的汉字 -->
        <el-table-column v-else
            :prop="column.prop"
            :label="column.title"
            :align="column.align"
            :width="column.width"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <!--正常渲染-->
                <template v-if="!column.render">
                  <template v-if="column.formatter">
                    <span v-html="column.formatter(scope.row, column)"></span>
                  </template>
                  <template v-else>
                    <span>{{scope.row[column.prop]}}</span>
                  </template>
                </template>
                <!--render函数-->
                <template v-else>
                  <expandDom :column="column" :row="scope.row" :render="column.render" :index="index"></expandDom>
                </template>
            </template>
        </el-table-column>

      </template>
      <!--endregion-->

    </el-table>

 </div>
</template>
<script>
 export default {
    props: {
        list: {
          type:Array,
          default:()=>[]
        }, // 数据列表
        columns: {
          type:Array,
          default:()=>[]
        }, // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
        options: {
          type: Object,
          default: function () {
            return {
              height:400,//默认高度-为了表头固定
              stripe: false, // 是否为斑马纹 table
              highlightCurrentRow: false, // 是否要高亮当前行
              border:false,//是否有纵向边框
              lazy:false,//是否需要懒加载
              loading:false,//是否需要等待效果
            }
          }
        }, // table 表格的控制参数
        tableClass:{
          type: String,
          default: 'hxTable'
        },
    },
    components: {
      /**
       * render函数渲染组件
       * */
      expandDom: {
        functional: true,
        props: {
          row: Object,
          render: Function,
          index: Number,
          column: {
            type: Object,
            default: null
          }
        },
        render: (h, ctx) => {
          const params = {
                            row: ctx.props.row,
                            index: ctx.props.index
                         }
          if (ctx.props.column) params.column = ctx.props.column
            return ctx.props.render(h, params)
          }
      }
    },
    data () {
      return {
        multipleSelection: [], // 多行选中
      }
    },
    mounted () {},

    computed: {},

    methods: {
        /**
         * 列表懒加载，必须先开启懒加载
         * */
        loadGetData(row,treeNode,resolve){//懒加载事件数据
          let data = {
            'row':row,
            'treeNode':treeNode,
            'resolve':resolve,
          }
          this.$emit('loadGetData',data);
        },
        /**
         * 多行选中
         * */
        handleSelectionChange (val) {// 多行选中
          debugger
          this.multipleSelection = val
          this.$emit('handleSelectionChange', val)
        },
        /**
         * 单击行事件
         * */
        clickRow(row, column, event){
          let data = {
            'row':row,
            'column':column,
            'event':event,
          }
          this.$emit('clickRow',data);
        },
        /**
         * 双击行事件
         * */
        dblclickRow(row, column, event){
          let data = {
            'row':row,
            'column':column,
            'event':event,
          }
          this.$emit('dblclickRow',data);
        },
        /**
         * 右键行事件-没去掉页面默认的
         * */
        contextmenu(row, column, event){
          let data = {
            'row':row,
            'column':column,
            'event':event,
          }
          this.$emit('contextmenu',data);
        },
        /**
         * 头部列点击事件
         * */
        headClick(column, event){
          let data = {
            'column':column,
            'event':event,
          }
          this.$emit('headClick',data);
        },
        /**
         * 头部列右键点击事件
         * */
        headcontextmenu(column, event){
           let data = {
            'column':column,
            'event':event,
          }
          this.$emit('headcontextmenu',data);
        },
        /**
         * 当前行发生改变时的事件
         * */
        rowChange(currentRow, oldCurrentRow){
           let data = {
            'currentRow':currentRow,
            'oldCurrentRow':oldCurrentRow,
          }
          this.$emit('rowChange',data);
        },
        /**
         * 用户手动勾选复选框触发
         * */
        select(sel,row){
           let data = {
            'sel':sel,
            'row':row,
          }
          this.$emit('select',data)
        },
        /**
         * 用户点击全选触发
         * */
        selectAll(sel){
           let data = {
            'sel':sel,
          }
          this.$emit('selectAll',data)
        }

    }
  }
</script>

2.调用方法：

（1）引入我们封装的组件

import eleTable from '@/components/com_ele/iTable'//table表格

（2）注册我们的组件

components: {
  eleTable
},

（3）在页面调用

   <eleTable :columns="columns" :list="list">
      <!-- 内容部分-操作 -->
      <el-table-column slot="operateT" label="操作" align='center'>
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="edit(scope.row)">修改</el-button>
        </template>
      </el-table-column>

      <!-- header部分-操作 -->
      <el-table-column prop="address" slot="headerClick"  align='center'>
        <template slot-scope="scope" slot="header">

          <el-popover
            popper-class="tablepopover"
            trigger="click">
            我是显示内容
            <span slot="reference">地址-点我试试</span>
          </el-popover>

        </template>
      </el-table-column>
    </eleTable>

（4）在data里面注册表头数据

columns:[
          {
            type: 'selection',
          },
          {
            title: '序号',
            type: 'index',
          },
          {
            title: '姓名',
            prop: 'name',
            align:'center',
          },
          {
            title: '时间',
            prop: 'date',
            align:'center',
          },
          {//头部slot
            slot:'headerClick',
          },
          {
            title: '性别',
            prop: 'sex',
            align:'center',
            render:(h, params)=> {
              let sex = params.row.sex;//params.row.type==获取到的值
              let nowText = '';
              if(sex == '1'){
                nowText='男'
              }else{
                nowText='女'
              }
              return h('div',{},nowText)
            }
          },
          {//内容slot
            slot: 'operateT',
          },
        ],

（5）在data里面定义table表格数据list

list:[
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            sex:'1'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            sex:'2'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            sex:'2'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            sex:'1'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            sex:'1'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            sex:'2'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            sex:'2'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            sex:'1'
          }
        ],

好了，到这里就结束了，有什么问题欢迎留言来讨论