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>