二次封裝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)
    },
  },
}
           

完成。。。