vue表格动态实现

Vue 表格动态实现方法

使用 v-for 动态渲染表格

通过 v-for 指令可以动态渲染表格行和列数据。定义一个数组作为数据源，在模板中使用 v-for 循环生成表格内容。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      rows: [
        ['张三', 25, '工程师'],
        ['李四', 30, '设计师'],
        ['王五', 28, '产品经理']
      ]
    }
  }
}
</script>

动态列配置

可以通过配置对象实现更灵活的表格结构，支持自定义列宽、对齐方式等属性。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.prop" :style="{ width: col.width }">
          {{ col.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td v-for="col in columns" :key="col.prop" :style="{ textAlign: col.align }">
          {{ item[col.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { prop: 'name', label: '姓名', width: '150px', align: 'left' },
        { prop: 'age', label: '年龄', width: '100px', align: 'center' },
        { prop: 'job', label: '职业', width: '200px', align: 'left' }
      ],
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  }
}
</script>

动态表格组件

封装可复用的动态表格组件，支持传入配置和数据。

<!-- DynamicTable.vue -->
<template>
  <table>
    <thead>
      <tr>
        <th v-for="col in columns" :key="col.prop">
          {{ col.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="index">
        <td v-for="col in columns" :key="col.prop">
          {{ item[col.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<!-- 使用组件 -->
<template>
  <dynamic-table :columns="columns" :data="tableData" />
</template>

动态排序功能

添加排序功能，通过点击表头实现数据排序。

<template>
  <table>
    <thead>
      <tr>
        <th 
          v-for="col in columns" 
          :key="col.prop"
          @click="sortTable(col.prop)"
        >
          {{ col.label }}
          <span v-if="sortKey === col.prop">
            {{ sortOrder > 0 ? '↑' : '↓' }}
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in sortedData" :key="index">
        <td v-for="col in columns" :key="col.prop">
          {{ item[col.prop] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      sortKey: '',
      sortOrder: 1,
      columns: [
        { prop: 'name', label: '姓名' },
        { prop: 'age', label: '年龄' },
        { prop: 'job', label: '职业' }
      ],
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.tableData
      return [...this.tableData].sort((a, b) => {
        const valueA = a[this.sortKey]
        const valueB = b[this.sortKey]
        return this.sortOrder * (valueA > valueB ? 1 : -1)
      })
    }
  },
  methods: {
    sortTable(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

动态分页功能

结合分页组件实现表格数据分页显示。

<template>
  <div>
    <table>
      <!-- 表格内容同上 -->
    </table>
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="currentPage = page"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 2,
      // 其他数据同上
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.sortedData.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.tableData.length / this.pageSize)
    }
  }
}
</script>