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）在頁面調用

 <!-- 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'
          }
        ],

好了，到這裏就結束了，有什麼問題歡迎留言來討論