Vue组件解析：自定义表格组件ByTable详解

【简介】：本文将介绍一个基于Vue框架和elementUi的自定义表格组件ByTable，通过阅读本文，你将了解到ByTable组件的使用方式、属性和插槽的配置方法，以及如何通过自动请求接口获取表格数据和实现分页功能。

1. 组件介绍

ByTable是一个通用的Vue表格组件，用于展示数据并提供分页功能。它具有灵活的配置选项和插槽，可以满足不同场景下的表格需求。

2. 组件用法

在使用ByTable组件时，你可能需要传递以下几个属性：

• column：表头配置数组，用于定义表格的列和相关属性。
• showPage：是否显示分页，默认为true。
• params：请求参数对象，用于发送网络请求时传递参数。
• requestUrl：请求数据的接口路径，应该是一个函数。
• isRequest：是否自动请求接口，默认为true。
• data：传递给表格的数据数组。
• border：是否显示表格边框，默认为true。
• dataAttrs：自定义配置数据和总数的字段，默认为['list', 'total']。
• page：自定义页数的字段，默认为'pageNum'。
• total：数据总数。

除了以上属性，ByTable组件还提供了以下两个插槽：

• slotKey：用于自定义表格单元格数据的插槽。
• slotHeaderKey：用于自定义表头的插槽。

并且by-table支持大部分elementui中table组件的属性，如果是设置Table-column Attributes可以直接通过column这个属性中的对象进行传递，例如

[{
    prop: 'name',
    label: '姓名',
    align: 'center',
    slotKey: 'name',
    slotHeaderKey: 'nameHearder'
}]

3. 组件源代码

<template>
  <div class="by-table">
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      header-row-class-name="by-table-header"
      v-loading="loading"
      :border="border"
      :data="isRequest ? tableData : data"
    >
      <template v-for="columnItem in column">
        <!-- 序号 -->
        <el-table-column
          v-if="columnItem.type === 'index'"
          :resizable="false"
          :key="columnItem.type + 'xuhao'"
          v-bind="columnItem"
        ></el-table-column>
        <!-- 不是序号的走这里 -->
        <el-table-column
          :key="columnItem.prop"
          v-bind="columnItem"
          v-else
          :resizable="false"
        >
          <!-- 表格里面的数据 -->
          <template slot-scope="{ row }">
            <slot
              :row="row"
              v-if="columnItem.slotKey"
              :name="columnItem.slotKey"
            >
            </slot>
            <template v-else>
              {{ row[columnItem.prop] || "-" }}
            </template>
          </template>
          <!-- 自定义表头 -->
          <slot slot="header" :name="columnItem.slotHeaderKey"></slot>
        </el-table-column>
      </template>
    </el-table>
    <!-- 分页 -->
    <template v-if="showPage">
      <by-pagination
        :total=" isRequest ? tableTotal : total"
        v-model="current"
        @currentChange="currentChange"
      ></by-pagination>
    </template>
  </div>
</template>

<script>
export default {
  name: 'ByTable',
  props: {
    // 表头
    column: {
      type: Array,
      default: () => [],
    },
    // 显示分页
    showPage: {
      type: Boolean,
      default: true,
    },
    // 请求的参数
    params: {
      type: Object,
      default: () => {},
    },
    // 请求路径
    requestUrl: {
      type: Function,
      default: () => {},
    },
    // 是否自动请求接口 默认是自动请求
    isRequest: {
      type: Boolean,
      default: true,
    },
    // 传递过来的表格数据
    data: {
      type: Array,
      default: () => [],
    },
    // 是否有边框 默认是有边框的
    border: {
      type: Boolean,
      default: true,
    },
    // 自定义配置数据和总数的字段，默认是list、total
    dataAttrs: {
      type: Array,
      default: () => {
        return ['list', 'total']
      },
    },
    // 自定义页数的字段
    page: {
      type: String,
      default: 'pageNum',
    },
    // 总数
    total: {
      type: [Number, String],
      default: 0
    }
  },
  data() {
    return {
      current: 1,
      loading: false,
      tableData: [],
      tableTotal: 0,
    }
  },
  mounted() {
    // 这是自动请求接口的判断
    if (this.isRequest) {
      this.loading = true
      this.requestData()
    }
  },
  methods: {
    // 分页
    currentChange(val) {
      // 如果是配置了自动请求接口走这里
      if (this.isRequest) {
        this.params[this.page] = val
        this.requestData()
        return
      }
      // 没有就走这里
      this.$emit('currentChange', val)
    },
    // 请求数据
    requestData() {
      // pre 请求数据前做的一些处理
      this.$emit('pre')
      this.requestUrl(this.params)
        .then((res) => {
          if (res?.success) {
            // postpose请求数据后对数据做处理可以走这里，因为对象地址没有变，所以你在父组件修改了数据，by-table的数据页会跟着改变的
            this.$emit('postpose', res.data)
            this.tableData = res.data[this.dataAttrs[0]]
            this.tableTotal = res.data[this.dataAttrs[1]]
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style>
.by-table-header th.el-table__cell {
  background-color: #f5f5f5;
}
</style>

4. 示例代码

下面是一个示例代码，演示了如何使用ByTable组件：

<template>
  <by-table :data="tableData" :column="columnList" :isRequest="false">
    <!-- 自定义表格单元格数据插槽 -->
    <template #name="{row}">
      {{ row }}
    </template>
    <!-- 自定义表头插槽 -->
    <template #nameHeader>
      123456
    </template>
  </by-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      columnList: [
        {
          prop: 'name',
          label: '姓名',
          align: 'center',
          slotKey: 'name',
          slotHeaderKey: 'nameHeader'
        },
        // 其他列配置...
      ]
    }
  }
}
</script>

在上面的示例中，我们传递了表格数据tableData和表头配置数组columnList给ByTable组件。同时，通过插槽的方式，自定义了表格单元格数据和表头的显示内容。

5. 自动请求接口和分页功能

如果需要通过接口获取数据并实现分页功能，可以使用ByTable组件提供的自动请求接口功能。通过配置requestUrl和params属性，以及自定义的数据字段和总数字段，可以轻松实现自动请求接口和分页功能。下面是相应的代码示例和解释：

<template>
  <by-table :column="columnList" :requestUrl="getUserAnalysis" :params="params" ref="byTable"></by-table>
</template>

<script>
export default {
  data() {
    return {
      columnList: [
        // 表头配置...
      ],
      params: {
        // 请求参数...
      },
      columnList: [
        {
          prop: 'name',
          label: '姓名',
          align: 'center',
          slotKey: 'name',
          slotHeaderKey: 'nameHeader'
        },
        // 其他列配置...
      ]
    }
  },
  methods: {
    getUserAnalysis(params) {
      // 这里是发送网络请求的函数，根据实际情况进行实现
      return axios.get('/api/user/analysis', { params })
    }
  },
  mounted() {
  }
}
</script>

在上面的示例中，我们传递了请求接口的函数getUserAnalysis给ByTable组件的requestUrl属性，以及请求参数params。组件会触发自动请求接口。

当分页发生变化时，ByTable组件会自动更新params中的pageNum字段，并重新请求数据。

这样，ByTable组件会自动发送网络请求，获取数据，并根据返回的数据更新表格和分页。

通过上述代码，你可以轻松实现自动请求接口和分页功能，无需手动处理数据和分页逻辑。

5. 总结

本文介绍了Vue组件ByTable的用法和属性配置，以及如何通过自动请求接口和分页功能实现数据的获取和展示。通过合理配置表头、插槽和相关属性，你可以根据具体需求创建灵活的表格组件。

下一篇：Vue组件解析：自定义弹窗组件ByDialog详解