vue 簡單的動態table表格封裝

效果圖

 

 

//代碼
<template>
  <!-- 表格 -->
  <div :id="id" class="tableList">
    <el-table
      v-if="renderOff"
      ref="tableList"
      :header-cell-style="{background:'#F5F7FA',color:'#666'}"
      :class="['table-main', className]"
      :data="renderData"
      :stripe="stripe"
      :height="tableHeight"
      tooltip-effect="dark"
      highlight-current-row
      size="mini"
    >
      <el-table-column
        v-for="(i, index) of renderHead"
        :key="index"
        size="mini"
        :prop="i.prop"
        :label="i.label"
        :width="i.width"
        :min-width="i.minWidth"
        :fixed="i.fixed"
        :align="i.align"
        :show-overflow-tooltip="i.tooltip || true"
      >
        <!-- 表頭 支持自定義插槽 默認顯示label -->
        <template slot="header" slot-scope="scope">
          <slot :name="`table-head-${i.slotKey}`" :scope="scope">
            <span class="table-default-th">{{ scope.column.label }}</span>
          </slot>
        </template>
        <!-- 表格 支持自定義插槽 默認顯示prop內容 -->
        <template slot-scope="scope">
          <slot :name="`table-${i.slotKey}-${scope.$index}`" :scope="scope">
            <span :style="i.style" :class="['table-default-td', i.className]">{{
              formatValue(scope, i)
            }}</span>
          </slot>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isActive"
        fixed="right"
        :width="activeWidth"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item, index) in active"
            :key="index"
            v-permission="item.pcode"
            size="mini"
            type="text"
            @click="handlerTdClick(item.eventKey, scope)"
            >{{ item.txt }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="isPage" type="flex" justify="end" align="middle" class="h60">
      <el-pagination
        :total="total"
        :current-page="page.pageNumber"
        :page-size="page.pageSize"
        background
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import tableHeight from "@/mixins/tableHeight";
export default {
  name: "BaseTable",
  mixins: [tableHeight],
  props: {
    // table ID
    id: {
      type: [String, Number],
      default: "",
    },
    /** 表頭項
     * {
     *  label:[String] 顯示的標題 ''
     *  prop:[String] 對應列內容的字段名 ''
     *  width:[String] 對應列的固定寬度 ''
     *  min-width:[String] 對應列的最小寬度(自適應) ''
     *  fixed:[String,Boolean] 列是否固定在左側或者右側  'true/left/right'
     *  align:[String] 對齊方式 'left/center/right'
     *  tooltip:[Boolean] 當內容過長被隱藏時顯示tooltip true
     *  className:[String] 類名 ''
     *  eventkey:[String] 自定義事件名稱 ''
     *  slotKey:[String] 自定義插槽鍵值 ''
     *  style:[Object]
     *  format:[Function] 過濾函數
     *  default:[String] 默認值
     * }
     */
    heads: {
      type: Array,
      default: () => [],
    },
    // 數據源
    datas: {
      type: Array,
      default: () => [],
    },
    // 操作按鈕
    active: {
      type: Array,
      default: () => [],
    },
    // 是否顯示操作列
    isActive: {
      type: Boolean,
      default: true,
    },
    activeWidth: {
      type: Number,
      default: 100,
    },
    // 是否為斑馬紋
    stripe: {
      type: Boolean,
      default: true,
    },
    // tableの類名
    className: {
      type: [String],
      default: "",
    },
    // 分頁
    page: {
      type: Object,
      default: () => ({}),
    },
    // 是否顯示分頁
    isPage: {
      type: Boolean,
      default: true,
    },
    // 總條數
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      // 渲染開關
      renderOff: true,
      // 渲染數據
      renderData: [],
      // 渲染表頭
      renderHead: [],
      // 表格配置
      table: {},
    };
  },
  watch: {
    heads: {
      handler(value) {
        this.renderHead = value;
      },
      immediate: true,
      deep: true,
    },
    datas: {
      handler(value, oldList) {
        this.renderData = value;
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
    });
  },
  methods: {
    /* 點擊分頁 */
    handleCurrentChange(val) {
      this.$emit("currentPage", val);
    },
    /* 處理單元格內容 */
    formatValue(scope, column) {
      let text = scope.row[scope.column.property];
      // 處理默認值
      if (!text && text !== 0) {
        if (typeof column.default === "string") {
          return column.default;
        } else return "-";
      }
      // 處理空數組
      if (Array.isArray(text)) {
        if (!text.length) return "-";
      }
      // 處理過濾函數
      if (typeof column.format === "function") {
        text = column.format(scope.row[scope.column.property]);
      }
      return text;
    },
    /* TD點擊事件 */
    handlerTdClick(eventKey, scope) {
      this.$emit(eventKey || "TD-click", scope.row);
    },
   
  },
};
</script>

 <base-table
          :id="baseTable"
          :datas="tableList"
          :heads="tableHeader"
          :active="tableActive"
          :page="page"
          :total="total"
          :stripe="false"
          :active-width="activeWidth"
          @editorData="editorData"
          @delectData="delectData"
          @currentPage="currentPage"
          @resourceData="resourceData"
        />

//pcode 自定義指令傳權限code
data() {
    return {
      baseTable: 'baseTable',
      tableHeader: [
        { label: '編號', prop: 'number' },
        { label: '項目類型', prop: 'name' },
        { label: '類型組', prop: 'projTypeGroupName' },
        { label: '項目屬性', prop: 'projectPropertyName' },
        { label: '學科', prop: 'subjectName' },
        { label: '任務類型', prop: 'projTaskTypeNames' } // todotodo
      ],
      tableList: [],
      tableActive: [
        { txt: '編輯', eventKey: 'editorData', pcode: [''] },
        { txt: '刪除', eventKey: 'delectData', pcode: [''] },
        {
          txt: '定義資源組',
          eventKey: 'resourceData',
          pcode: ['basic_data_update']
        }
      ],
      isActive: false,
      activeWidth: 200,
      page: {
        pageNumber: 1,
        pageSize: 20
      },
      total: 0
    };
  },


methods: {
    editorData(){}
    delectData(){}
    currentPage(){}
    resourceData(){}
}