基于element-ui table的二次封装以及slot的使用

插槽是什么？

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”

$attrs是什么

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件——在创建高级别的组件时非常有用。

$listeners是什么

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=“$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

下面给出一个基于element-ui table的基本封装实例

<template>
	<el-table
      ref="wxtTable"
      v-bind="$attrs"
      v-on="$listeners"
      element-loading-spinner="el-icon-loading"
      element-loading-text="拼命加载中"
      border
    >
      <template v-for="(item, index) in tableColumnList">
		<el-table-column
          :key="`col_${index}`"
          :prop="item.prop"
          min-width="100px"
          :align="item.align || 'center'"
          :width="item.width"
          :label="item.label"
          :resizable="item.resizable"
          :showOverflowTooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template slot-scope="scope">
            <!--自定义作用域插槽-->
            <template v-if="item.slotName">
              <slot :name="item.slotName" :scope="scope"></slot>
            </template> </template>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
</template>
	<script>
export default {
name: 'wxtTable',
  props: {
  	tableColumnList: {
      type: Array,
      default: () => []
    }, // 表格column
  },
}
</script>

页面中使用

<template>
	<wxt-table ref="wxtTable"
       	:data="tableList"
        :columnConfigList="columnConfigList">
        <template v-slot:peakRateAvg="{scope}">
			
		</template>
    </wxt-table>
</template>

<script>
import wxtTable from '@/components/wxtTable'
export default {
	components: {
    	wxtTable
  	},
  	data(){
		return {
			tableList:[],
			columnConfigList:[
				 { prop: 'date', label: '时间'},
		        { prop: 'name', label: '电源类型'},
		        { prop: 'maxRateAvg', label: '平均最大出力率' },
		        {
		          prop: 'peakRateAvg',
		          label: '平均高峰负荷时刻出力率',
		          slotName:'peakRateAvg'
		        }
			]
		}
	}
}
</script>