Vue3新拟态组件库开发流程之table组件源码分析攻略

1. 前言

Vue3作为一款优秀的前端框架，不断地为前端开发者带来更加方便和高效的开发模式。其中，拟态风格越来越受到大家的关注，为此，我们今天就来学习一下Vue3新拟态组件库开发流程中的table组件源码分析。

2. 源码分析

2.1. 源文件结构

table组件的源码位于/src/components/table目录下，相关文件和目录如下：

- table/
  - index.js
  - table.vue
  - table-cell.vue
  - table-header.vue
  - table-row.vue

源文件结构非常清晰，其中index.js是对外的入口文件，table.vue是table组件的主体代码。

2.2. 主体代码分析

首先，我们先看一下table.vue的代码。

<template>
  <table>
    <thead>
      <tr>
        <TableHeader
          v-for="(column, key) in columns"
          :key="key"
          :column="column"
          @sortChange="handleSortChange"
        />
      </tr>
    </thead>
    <tbody>
      <TableRow
        v-for="(row, rowIndex) in rows"
        :key="rowIndex"
        :row="row"
        :columns="columns"
      />
    </tbody>
  </table>
</template>

<script>
import TableHeader from './table-header.vue'
import TableRow from './table-row.vue'

export default {
  name: 'VTable',
  components: {
    TableHeader,
    TableRow
  },
  props: {
    columns: {
      type: Array
    },
    rows: {
      type: Array
    },
    sortColumn: {
      type: String,
      default: ''
    },
    sortOrder: {
      type: String,
      default: 'ascending'
    }
  },
  methods: {
    handleSortChange(column) {
      this.$emit('sort-change', column)
    }
  }
}
</script>

可以看到，table.vue主体代码非常简单，只包含一个<table>标签，其中含有两个子组件TableHeader和TableRow，还有几个props和一个监听事件。我们可以针对这几个部分做一个具体分析。

2.2.1. TableHeader部分

接下来我们看一下TableHeader组件的代码，它负责将传入的列信息展示在表格上部。TableHeader组件的代码如下：

<template>
  <th>
    <slot>{{ column.label }}</slot>
    <span v-if="column.sortable" class="sort-icon" :class="{ active: isSorted(column) }">
      <svg viewBox="0 0 24 24">
        <path
          d="M7.41 8.59L6 7.17V21a1 1 0 0 0 2 0V7.17l-1.41 1.42A1 1 0 0 0 6 9a1 1 0 0 0 .71.29 1 1 0 0 0 .7-.29l2.58-2.59a1 1 0 0 0 0-1.41 1 1 0 0 0-1.41 0z"
        />
      </svg>
    </span>
  </th>
</template>

<script>
export default {
  name: 'TableHeader',
  props: {
    column: {
      type: Object
    }
  },
  methods: {
    isSorted(column) {
      return column.prop === this.sortColumn
    },
    handleClick() {
      this.$emit('sortChange', this.column.prop)
    }
  }
}
</script>

主要由一个<th>标签组成，标签内部包含列名称column.label和排序图标。排序图标的显示受到列是否可排序以及当前列是否是排序列的影响。

2.2.2. TableRow部分

接下来我们看一下TableRow组件的代码，它负责将传入的行信息展示在表格上。TableRow组件的代码如下：

<template>
  <tr>
    <TableColumn
      v-for="(column, key) in columns"
      :key="key"
      :column="column"
      :row="row"
    />
  </tr>
</template>

<script>
import TableColumn from './table-column.vue'

export default {
  name: 'TableRow',
  components: {
    TableColumn
  },
  props: {
    columns: {
      type: Array
    },
    row: {
      type: Object
    }
  }
}
</script>

TableRow包含多个<TableColumn>组件，对于每一列信息，它都会将它传入到TableColumn组件内部去渲染，这里使用了v-for指令来遍历所有列信息并渲染。TableColumn组件是一个公共组件，我们将在下一个小节进行讲解。

2.2.3. TableColumn部分

最后我们看一下TableColumn组件的代码，它负责将传入的数据信息展示在表格上。TableColumn组件的代码如下：

<template>
  <td>
    <slot>{{ row[column.prop] }}</slot>
  </td>
</template>

<script>
export default {
  name: 'TableColumn',
  props: {
    column: {
      type: Object
    },
    row: {
      type: Object
    }
  }
}
</script>

我们看到，TableColumn组件仅仅只包含一个<td>标签，同时它也使用了插槽来动态获取每一行的指定列中的值并进行渲染。这里我们对组件的重利用达到了最大的优化。

3. 示例说明

我们该如何使用这个table组件呢？下面我们来举两个简单的示例说明。

3.1. 基本用法

<template>
  <div>
    <VTable
      :columns="columns"
      :rows="rows"
      @sort-change="sortChangeHandler"
      :sortColumn="sortColumn"
      :sortOrder="sortOrder"
    />
  </div>
</template>

<script>
import VTable from '@/components/table/index.js'

export default {
  name: 'example',
  components: {
    VTable
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name', sortable: true },
        { label: '年龄', prop: 'age', sortable: true },
        { label: '性别', prop: 'gender' }
      ],
      rows: [
        { name: '小明', age: 18, gender: 1 },
        { name: '小红', age: 16, gender: 0 },
        { name: '小李', age: 20, gender: 1 },
        { name: '小白', age: 18, gender: 0 },
        { name: '小黄', age: 19, gender: 1 }
      ],
      sortColumn: '',
      sortOrder: 'ascending'
    }
  },
  methods: {
    sortChangeHandler(column) {
      if (column === this.sortColumn) {
        this.sortOrder = this.sortOrder === 'ascending' ? 'descending' : 'ascending'
      } else {
        this.sortColumn = column
        this.sortOrder = 'ascending'
      }
      this.sortRows()
    },
    sortRows() {
      this.rows.sort((row1, row2) => {
        let ascending = this.sortOrder === 'ascending' ? 1 : -1
        let descending = -ascending
        if (row1[this.sortColumn] > row2[this.sortColumn]) {
          return ascending
        } else if (row1[this.sortColumn] < row2[this.sortColumn]) {
          return descending
        } else {
          return 0
        }
      })
    }
  }
}
</script>

以上代码实现了一个简单的表格展示功能，其中columns和rows是table组件的props，分别对应表格的列信息和行信息。如果某一列可以排序，对应的column对象中的sortable值为true，并且用户可以点击表头中的排序图标进行升序或降序排列。sortColumn和sortOrder分别表示当前排序的列和顺序。

3.2. 带分页功能

<template>
  <div>
    <div class="table-pagination">
      <el-pagination
        v-model="currentPage"
        :total="rows.length"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        :prev-text="'上一页'"
        :next-text="'下一页'"
        :layout="'prev, pager, next'"
      />
    </div>
    <VTable
      :columns="columns"
      :rows="currentPageRows"
      @sort-change="sortChangeHandler"
      :sortColumn="sortColumn"
      :sortOrder="sortOrder"
    />
  </div>
</template>

<script>
import VTable from '@/components/table/index.js'
import { ElPagination } from 'element-plus'

export default {
  name: 'example',
  components: {
    VTable,
    ElPagination
  },
  data() {
    return {
      columns: [
        { label: '姓名', prop: 'name', sortable: true },
        { label: '年龄', prop: 'age', sortable: true },
        { label: '性别', prop: 'gender' }
      ],
      rows: [
        { name: '小明', age: 18, gender: 1 },
        { name: '小红', age: 16, gender: 0 },
        { name: '小李', age: 20, gender: 1 },
        { name: '小白', age: 18, gender: 0 },
        { name: '小黄', age: 19, gender: 1 }
      ],
      sortColumn: '',
      sortOrder: 'ascending',
      currentPage: 1,
      pageSize: 3
    }
  },
  computed: {
    currentPageRows() {
      let start = (this.currentPage - 1) * this.pageSize
      let end = start + this.pageSize
      return this.rows.slice(start, end)
    }
  },
  methods: {
    sortChangeHandler(column) {
      if (column === this.sortColumn) {
        this.sortOrder = this.sortOrder === 'ascending' ? 'descending' : 'ascending'
      } else {
        this.sortColumn = column
        this.sortOrder = 'ascending'
      }
      this.sortRows()
    },
    sortRows() {
      this.rows.sort((row1, row2) => {
        let ascending = this.sortOrder === 'ascending' ? 1 : -1
        let descending = -ascending
        if (row1[this.sortColumn] > row2[this.sortColumn]) {
          return ascending
        } else if (row1[this.sortColumn] < row2[this.sortColumn]) {
          return descending
        } else {
          return 0
        }
      })
    }
  }
}
</script>

以上代码在示例1的基础上加入了分页功能，使用了Element Plus的分页组件。其中，计算属性currentPageRows根据当前页码和每页显示的数量计算出当前页需要展示的数据行，然后传入到VTable组件中进行渲染。如果用户点击了分页器上的上一页或下一页按钮，currentPage会得到更新，计算属性currentPageRows也会随之更新，自动渲染出新的表格。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue3新拟态组件库开发流程之table组件源码分析 - Python技术站

vue3新拟态组件库开发流程之table组件源码分析