vue-iview-table二次封装，render函数，slot的封装

前言：

        正好这个项目用到iview的table，之前有封装的element的table，这里把iview的也封装下，提高复用性和价值。

首先：我们的公共组件ctable.vue

<template>
  <Table 
    :width='width'
    :height='height'
    :stripe='stripe' 
    :border='border' 
    :disabled-hover='disabledHover'
    :highlight-row='highlightRow'
    :columns="columns" 
    :data="list" 
    @on-selection-change="seclectChange"
    @on-row-click='rowClick'
    @on-row-dblclick='rowdblclick'
    @on-current-change='currentChange'
    @on-select-all='selectAll'
    @on-select-all-cancel='selectAllCancel'
    @on-sort-change='sortChange'
    @on-filter-change='filterChange'
    >
    <!-- 定义slot部分 -->
    <template slot-scope="{ row, index }" slot="operation">
      <Button size="small" type="primary" @click="clickBJ(row)">编辑</Button>
    </template>
    <template slot-scope="{ row, index }" slot="operationT">
      <Button size="small" type="primary" @click="clickZX(row)" style="margin-right:5px;">执行</Button>
      <Button size="small" type="primary" @click="clickTJ(row)">统计</Button>
    </template>
  </Table>
</template>

<script>
  export default {
    name:'iview-table',
    props:{
        columns: Array, // 表头数据
        list: Array, // 表格数据
        width: [Number, String],//表格宽度
        height: [Number, String],//表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头-***注意传进来是number的有滚动条，px的没有
        stripe: { // 是否显示间隔斑马纹
            type: Boolean,
            default: false
        },
        border: { // 是否显示纵向边框
            type: Boolean,
            default: false
        },
        disabledHover: { // 禁用鼠标悬停时的高亮
            type: Boolean,
            default: false
        },
        highlightRow: { // 是否支持高亮选中的行，即单选
            type: Boolean,
            default: false
        }
    },
     data () {
      return {

      };
    },
    methods:{
      /**
       * 自带事件
       */
      rowClick(data,index){//单击某一行时触发,data==当前行数据，index==当前行的下标
        let str={
          'data':data,
          'index':index
        }
        this.$emit("rowClick",str)
      },
      rowdblclick(data,index){//双击击某一行时触发,data==当前行数据，index==当前行的下标
        let str={
          'data':data,
          'index':index
        }
        this.$emit("rowdblclick",str)
      },
      currentChange(currentRow,oldCurrentRow){//开启 highlight-row 后有效，当表格的当前行发生变化的时候会触发,currentRow==当前高亮行数据，oldCurrentRow==上次高亮行数据
        let str={
          'data':currentRow,
          'oldData':oldCurrentRow
        }
        this.$emit("currentChange",str)
      },
      seclectChange(selection){//在多选模式下有效，只要选中项发生变化时就会触发,selection==已选项数据
        let str={
          'data':selection
        }
        this.$emit("selectionData",str)
      },
      selectAll(selection){//在多选模式下有效，点击全选时触发,selection：已选项数据
        let str={
          'data':selection
        }
        this.$emit("selectAll",str)
      },
      selectAllCancel(selection){//在多选模式下有效，取消点击全选时触发,selection：已选项数据
        let str={
          'data':selection
        }
        this.$emit("selectAllCancel",str)
      },
      sortChange(column,key,order){//排序时有效，当点击排序时触发,column==当前列数据,key==排序依据的指标,order==asc/desc
        let str={
          'column':column,
          'order':order,
          'key':key
        }
        this.$emit("sortChange",str)
      },
      filterChange(column){//筛选时有效，筛选条件发生变化时触发,column==当前列数据
        let str={
          'column':column
        }
        this.$emit("filterChange",str)
      },
      /**
       * slot事件
       */
      clickBJ(data){//编辑点击事件
         this.$emit("clickBJ",data)
      },
      clickZX(data){//编辑执行事件
        this.$emit("clickZX",data)
      },
      clickTJ(data){//编辑统计事件
        this.$emit("clickTJ",data)
      }
    }
  }
</script>

其次：就是调用部分，我这里简单说下里面的步骤，最底下会把完整的调用代码贴上的，方便直接用，

1、template部分：

2、script-data部分：

3、script-method部分：

接下来贴一下调用部分的完整代码：

<template>
  <div>
    <CTable 
    :columns='this.dyydyl.col' 
    :list='this.dyydyl.list' 
    :height='this.dyydyl.height' 
    :stripe='this.dyydyl.stripe'
    @clickBJ='clickBJ'
    @clickZX='clickZX'
    @clickTJ='clickTJ'
    ></CTable>
  </div>
</template>

<script>
  
  import CTable from '@/components/comIview/ctable'//iview-table
  export default {
    name:'moral',//道德讲堂
    props:[''],
    data () {
      return {
        dyydyl:{//党员一带一路
          height:280,
          stripe:true,//斑马纹
          col:[
              // {//是否显示序号-不分页
              //     type: 'index',
              //     width: 60,
              //     align: 'center'
              // },
              // {//是否显示复选框
              //     type: 'selection',
              //     width: 60,
              //     align: 'center'
              // },
              {//是否显示序号-分页
				title: '序号',
				width: 50,
				align: 'center',
				render: (h,params) => {
					let rows = this.searchDTO.pageParamers.rows;//page每页展示多少条
					let page = this.searchDTO.pageParamers.page;//page当前页码
					return h('span',params.index + (rows*(page-1)+1))
				    }
				},
             {
                title: '党员',
                key: 'dy',
                align: 'center',
                width: 80,
              },
              {
                title: '等级',
                key: 'dj',
                align: 'center',
                width: 80,
                render: (h, params) => {//render函数,iview这里可以直接用
                  let dj = params.row.dj;//params.row.dj==获取到的值
                  let style={};
                  if(dj == '一般'){
                    style.color = '#00fffc';
                  }else if(dj == '重大'){
                    style.color = '#ff5816';
                  }else if(dj == '紧急'){
                    style.color = '#ffc000';
                  }
                  return h('div', {
                    style:style
                  } ,params.row.dj)
                }
              },
              {
                title: '目标',
                key: 'mb',
                align: 'center',
                width: 'auto',
              },
              {
                title: '操作',
                slot: 'operationT',
                align: 'center',
                width: 'auto',
              },
              {
                title: '操作',
                slot: 'operation',
                align: 'center',
                width: 'auto',
              },
                //这里在加个在页面通过render渲染两个按钮的方法
            //   {
            //     title: '培训地点',
            //     align: 'center',
            //     width: 'auto',
            //     render: (h, params) => {
            //             return h("div", [
            //                 h(
            //                     "Button",
            //                     {
            //                     props: {
            //                         type: "primary",
            //                         size: "small"
            //                     },
            //                     style: {
            //                         marginRight: "5px"
            //                     },
            //                     on: {
            //                         click: (e) => {
            //                              e.stopPropagation();//阻止冒泡
            //                              alert('查看');
            //                         }
            //                     }
            //                     },
            //                     "查看"
            //                 ),
            //                 h(
            //                     "Button",
            //                     {
            //                     props: {
            //                         type: "primary",
            //                         size: "small"
            //                     },
            //                     style: {
            //                         marginRight: "5px"
            //                     },
            //                     on: {
            //                         click: (e) => {
            //                              e.stopPropagation();//阻止冒泡
            //                              alert('删除');
            //                         }
            //                     }
            //                     },
            //                     "删除"
            //                 )
            //             ]);
            //         }
            //    },



          ],
          list:[
            {
                'dy': '陈盛泽',
                'dj': '一般',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '重大',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '紧急',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '一般',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '重大',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
              {
                'dy': '张盛泽',
                'dj': '党员',
                'mb': '争取在年底前超额完成任务',
              },
          ]
        },
      };
    },

    components: {
      CTable
    },

    computed: {},

    beforeMount() {},

    mounted() {},

    methods: {
      clickBJ(){
        alert('编辑');
      },
      clickZX(){
        alert('执行');
      },
      clickTJ(){
        alert('统计');
      },
    },

    watch: {}

  }

</script>
<style lang='' scoped>

</style>