二次封装element table组件

element的table组件其实已经很完善了，不过调用的时候需要写很多重复的标签比较臃肿，所以我打算封装一个通用tabel的组件。

首先是页面：

<div class="table-container">
    <el-table
        fit
        :height="config.height"
        :size="config.size"
        ref="tableList"
        tooltip-effect="light"
        style="width: 100%;"
        :stripe="config.stripe"
        :border="config.border"
        :data="dataList"
        @selection-change="handleSelectionChange"
        highlight-current-row>
        <!--      复选框-->
        <el-table-column
          v-if="config.showSelect"
          type="selection"
          width="55">
        </el-table-column>
        <!--数据源-->
        <el-table-column
          v-for="column in columns"
          header-align="center"
          :type="column.prop||''"
          :sortable="column.hasSort||false"
          :key="column.prop"
          :fixed="column.fixed||''"
          :prop="column.prop"
          :label="column.label"
          :align="column.align||'center'"
          :width="column.width||''"
          :show-overflow-tooltip="column.tooltip||false">
          <template slot-scope="scope">
            <!-- 操作 -->
            <div v-if="column.prop==='operation'">
              <el-button v-if="i.hasPrivilege" :key="i.type" v-for="i in column.operationList" class="option_btn"
                         size="mini" type="text"
                         @click="toClick(scope.row, i.type)">{{i.text}}
              </el-button>
            </div>
            <div v-else>
              <!-- 自定义插槽 -->
              <customize-slot v-if="column.render" :render="column.render" :row="scope.row" :index="scope.$index"
                              :column="column"></customize-slot>
              <span v-else>
                  {{scope.row[column.prop]}}
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
  </div>
           

然后是js

// 自定义内容的组件
let customizeSlot = {
  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 {
  name: 'TablePublic',
  props: {
    dataList: {// 表格数据源 默认为空数组
      type: Array,
      default: () => [],
    },
    columns: {// 表格的字段展示 默认为空数组
      type: Array,
      default: () => [
        // 序号列
        /* {
           label: '序号', // 列头名称
           prop: 'index', // 序号的prop
           width: 50, // 列宽度
           render: (h, params) => {
             return h('span', this.listIndex(params.row.index)) // 处理数据方法
           },
         }, */

        // 配置列的属性
        // {
        //   label: '床位号',
        //   prop: 'code',
        //   hasSort: true, // 是否对列排序
        //   width: true, // 列宽度
        //   align: center, // 列对齐方式，left/center/right，默认left
        //   tooltip: false, // 当内容过长被隐藏时显示 tooltip，默认false
        //   fixed: true, // 列是否固定在左侧或者右侧，true 表示固定在左侧,true, left, right
        //   render: (h, params) => {
        //     return h('span', this.spliceBedCode(params.row.code))
        //   },
        // },

        // 普通列
        // {label: '科室', prop: 'departmentName'},

        // 添加操作按钮
        // {
        //   label: '操作',
        //   prop: 'operation', // 操作的prop
        //   width: 180,
        //   operationList: [
        //     {text: '编辑', type: 'edit', hasPrivilege: hasPrivilege('e_medical_config.deleteBed')}, // hasPrivilege 是否有操作权限
        //     {text: '删除', type: 'delete', hasPrivilege: hasPrivilege('e_medical_config.editBed')},
        //     {text: '详情', type: 'view', hasPrivilege: hasPrivilege('e_medical_config.viewBed')},
        //   ]
        // }
      ],
    },
    config: { // 表格的属性配置
      type: Object,
      default: function () {
        return {
          stripe: true, // 表格是否斑马纹
          border: true, // 表格是否带有纵向边框
          showSelect: false, // 表格显示复选框
          height: '100%', // 表格高度
          size: 'small', // 表格大小
        }
      },
    },
  },
  components: {
    'customize-slot': customizeSlot,
  },
  watch: {},
  mounted () {
  },
  methods: {
    // 选择回调
    handleSelectionChange (items) {
      this.$emit('selectionChange', items)
    },
    // 操作数据回调
    toClick (row, type) {
      this.$emit('change', row, type)
    },
  },
}
           

完成。。。