table封裝成全局組件

主要是利用了插槽

<!-- table全局組件 -->
<template>
  <el-table
    v-if="tableData.length"
    :data="tableData"
    style="width: 100%"
    row-key="classification"
  >
    <el-table-column
      align="center"
      stripe
      v-for="(item, index) in tableConfig.head"
      :key="index"
      :label="item.label"
    >
      <template slot-scope="scope">
        <template v-if="item.slotName">
          <slot
            :name="item.slotName"
            :rowData="scope.row"
            :index="scope.$index"
          >
            <!-- 1使用作用域插槽 給外部用戶預留了插槽，但是如果外面不用，就是用默認值 -->
            {{ scope.row[item.prop] }}
          </slot>
        </template>
        <!-- 如果沒帶slotName屬性，就默認展示該條數據信息 -->
        <template v-else>{{ scope.row[item.prop] }}</template>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "VTable",
  props: {
    tableConfig: {
      type: Object,
      required: true,
      default: () => {},
    },
    tableData: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    /**********************************************網絡請求模塊******************************************************/
    /*********************************************數據邏輯處理模塊**************************************************/
  },
};
</script>
<style lang="scss" scoped>
</style>

 使用

<!--1 Application Management 應用管理-->
<template>
  <div class="app-management">
    <v-table :table-config="tableConfig" :table-data="tableData">
      <!-- 插入applicationName內容 實現外部自定義樣式 -->
      <template #applicationName="{ rowData }">
        <span class="application-name">{{ rowData.applicationName }}</span>
      </template>
      <!-- 插入opt 實現自定義表格最右邊操作選項 -->
      <template #opt="{ rowData, index }">
        <div class="table-opt">
          <span @click="pointDetail(index, rowData)">積分詳情</span>
          <span class="line"></span>
          <span @click="editCategory(index, rowData)">編輯分類</span>
        </div>
      </template>
    </v-table>
  </div>
</template>
<script>
export default {
  name: "ApplicationManagement",
  data() {
    return {
      tableConfig: {
        head: [
          {
            prop: "applicationName",
            label: "應用名稱",
           slotName: "applicationName",
          },
          {
            prop: "pointName",
            label: "積分名稱",
          },
          {
            prop: "categoryName",
            label: "分類",
          },
          {
            prop: "createTime",
            label: "創建時間",
          },
          {
            prop: "updateTime",
            label: "更新時間",
          },
          {
            prop: "opt",
            label: "操作",
            slotName: "opt",
          },
        ],
      },
      tableData: [
        {
          applicationName: "天府市民雲",
          pointName: "雲豆",
          categoryName: "任務分類1，任務分類2，任務分類3",
          createTime: "2020-10-22 19:21:21",
          updateTime: "2020-10-22 19:21:21",
        },
        {
          applicationName: "全國版市民雲",
          pointName: "雲幣",
          categoryName: "任務分類1,任務分類3",
          createTime: "2020-10-22 19:21:21",
          updateTime: "2020-10-22 19:21:21",
        },
      ],
    };
  },
  methods: {
    /**********************************************網絡請求模塊******************************************************/
    /*********************************************數據邏輯處理模塊**************************************************/
    //積分詳情
    pointDetail(index, row) {
      console.log(index, row);
    },
    //編輯分類
    editCategory(index, row) {
      console.log(index, row);
      this.$router.push({ name: "TaskClassification" });
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.app-management {
  .application-name {
    color: #3894ff;
  }
}
</style>