vue+element table動态表格的封裝

elementUI的動态表格封裝，做個筆記，elementUI官網

1.在components中建立GlobalTable檔案夾，代碼如下

<template>
  <div class="c-table">
    <!--region 表格-->
    <el-table
      id="CTable"
      ref="CTable"
      v-loading="loading"
      empty-text="暫無資料"
      :height="height!=''?height:tableHeight"
      :data="dataList"
      :stripe="options.stripe"
      :header-cell-style="{background:'#f2f2f2',color:'#909399'}"
      align="center"
      :row-style="tableRowStyle"
      @selection-change="handleSelectionChange"
    >
      <!--region 選擇框-->
      <el-table-column v-if="options.mutiSelect" type="selection" style="width: 55px;" />
      <!--endregion-->
      <!--region 資料列-->
      <template v-for="(column, index) in columns">
        <el-table-column
          :key="column.id"
          :prop="column.prop"
          :label="column.label"
          :align="column.align"
          :width="column.width"
          :sortable="column.sortable"
          :show-overflow-tooltip="column.tooltip"
        >
          <template slot-scope="scope">
            <template v-if="!column.render">
              <template v-if="column.formatter">
                <span v-html="column.formatter(scope.row, column)" />
              </template>
              <template v-else>
                <span>{{ scope.row[column.prop] }}</span>
              </template>
            </template>
            <template v-else>
              <expand-dom :column="column" :row="scope.row" :render="column.render" :index="index" />
            </template>
          </template>
        </el-table-column>
      </template>
      <!--endregion-->

      <!--region 按鈕操作組-->
      <el-table-column
        v-if="operates&&operates.list.length > 0"
        ref="fixedColumn"
        :label="operates.label"
        align="center"
        :width="operates.width"
        :fixed="operates.fixed"
      >
        <template slot-scope="scope">
          <div class="operate-group">
            <template v-for="(btn, key) in operates.list">
              <el-button
                v-if="btn.show(scope.row)"
                :key="key"
                :type="btn.type"
                :size="btn.size"
                :icon="btn.icon"
                :disabled="btn.disabled && btn.disabled(scope.$index,scope.row)"
                :plain="btn.plain"
                @click.native.prevent="btn.method(key,scope.row)"
              >{{ btn.label }}
              </el-button>
            </template>
          </div>
        </template>

      </el-table-column>
      <!--endregion-->

    </el-table>
    <!--endregion-->

  </div>
</template>
<script>
//動态給表格高度
import tableHeightMixin from '@/mixins/tableHeight'
export default {
    name: 'CTable',
    components: {
        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)
            }
        }
    },
    mixins: [tableHeightMixin],
    props: {
        // 資料清單
        list: {
            // prop:表頭綁定的地段，label：表頭名稱，align：每列資料展示形式（left, center, right），width:列寬
            type: Array,
            default: () => {
                return []
            }
        },
        height: {
            type: String,
            default: ''
        },

        columns: {
            // 需要展示的列 === prop：列資料對應的屬性，label：列名，align：對齊方式，width：列寬
            type: Array,
            default: () => {
                return []
            }
        },

        // 操作按鈕
        operates: {
            // width:按鈕列寬，fixed：是否固定（left,right）,按鈕集合 === label: 文本，
            // type :類型（primary / success / warning / danger / info / text），
            // show：是否顯示，icon：按鈕圖示，plain：是否樸素按鈕，disabled：是否禁用，method：回調方法
            type: Object,
            default: () => {
                return {
                    width: 180,
                    fixed: 'right',
                    label: '操作',
                    list: []
                }
            }
        },

        // 是否添加表格loading加載動畫
        loading: {
            type: Boolean,
            default: false
        },

        // table 表格的控制參數
        options: {
            type: Object,
            default: () => {
                return {
                    stripe: true, // 是否為斑馬紋 table
                    highlightCurrentRow: false, // 是否支援目前行高亮顯示
                    mutiSelect: false // 是否支援清單項選中功能
                }
            }
        }

    },

    data() {
        return {
            dataList: this.list

        }
    },
    watch: {
        list: {
            deep: true,
            handler(newVal) {
                // 強制重新渲染元件
                this.$forceUpdate()
                this.dataList = newVal
            }
        }

    },
    mounted() {

    },
    methods: {
        // 多行選中
        handleSelectionChange(val) {
            this.$emit('selectionChange', val)
        },
        // 修改table tr行的背景色
        tableRowStyle({ row, rowIndex }) {}
    }
}
</script>

           

2.在main.js中引用，全局使用，代碼如下

import GlobalTable from '@/components/GlobalTable/index'

Vue.component('global-table ', GlobalTable )
           

3.在使用元件，代碼如下

<template>
  <div class="table-page">
    <!--region table 表格-->
    <global-table
    :list="list"
    :options="options"
    :columns="columns"
    :operates="operates"
    @handleSelectionChange="handleSelectionChange"
  >
    </global-table>
    <!--endregion-->
  </div>
</template>
<script>
  export default {
    data () {
      return {
        list: [],
        // 需要展示的列
        columns: [
          {
            prop: 'id',
            label: '編号',
            align: 'center',
            width: 60
          },
          {
            prop: 'title',
            label: '昵稱',
            align: 'center',
            width: 400,
            formatter: (row, column, cellValue) => {
              return `<span style="white-space: nowrap;color: dodgerblue;">${row.name}</span>`
            }
          },
          {
            prop: 'state',
            label: '狀态',
            align: 'center',
            width: '160',
            render: (h, params) => {
              return h('el-tag', {
                props: {type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'} // 元件的props
              }, params.row.state === 0 ? '上架' : params.row.state === 1 ? '下架' : '稽核中')
            }
          },
          {
            prop: 'createDate',
            label: '注冊時間',
            align: 'center',
            width: 180,
            formatter: (row, column, cellValue) => {
              return this.$utils.Common.dateFormat(row.createDate, 'YYYY年MM月DD日 hh:mm')
            }
          }
        ],
         // 操作按鈕組
         operates: {
             width: 160,
             fixed: 'right',
             label: '操作',
             list: [
                 {
                     label: '詳情',
                     type: 'success',
                     show: (row) => true,
                     size: 'mini',
                     plain: false,
                     disabled: false,
                     method: (index, row) => {
                         this.handleDetail(index, row)
                     }
                 },
                 {
                     label: '曆史',
                     type: 'danger',
                     show: (row) => true,
                     size: 'mini',
                     plain: false,
                     disabled: false,
                     method: (index, row) => {
                         this.handleHistory(index, row)
                     }
                    }
                ]
            }, 
           
        pagination: {
          pageIndex: 1,
          pageSize: 20
        }, // 分頁參數
        options: {
          stripe: true, // 是否為斑馬紋 table
          loading: false, // 是否添加表格loading加載動畫
          highlightCurrentRow: true, // 是否支援目前行高亮顯示
          mutiSelect: true // 是否支援清單項選中功能
        } // table 的參數
      }
    },
    components: {
      expandDom: {
        props: {
          column: {
           required: true
          },
          row: {
            required: true
          }
        },
        render (h) {
          return h('div', {}, ([this.column.render(this.row, this.column)]))
        }
     }
   },
    mounted () {
    },
    methods: {

      // 選中行
      handleSelectionChange (val) {
        console.log('val:', val)
      },
     
    }
  }
</script>