vue表格怎么实现

Vue 表格实现方法

在 Vue 中实现表格功能可以通过多种方式完成，以下是几种常见的方法：

使用原生 HTML 表格

最简单的表格可以通过 Vue 的数据绑定功能结合原生 HTML 表格元素实现：

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

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

使用 Element UI 表格组件

Element UI 提供了功能丰富的表格组件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ]
    }
  }
}
</script>

使用 Ant Design Vue 表格

Ant Design Vue 也提供了强大的表格组件：

<template>
  <a-table :columns="columns" :data-source="data" />
</template>

<script>
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  }
]

const data = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42
  }
]

export default {
  data() {
    return {
      data,
      columns
    }
  }
}
</script>

实现表格高级功能

对于需要分页、排序、筛选等高级功能的表格：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @sort-change="handleSortChange"
    :default-sort="{prop: 'date', order: 'descending'}"
  >
    <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  ></el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      // 排序逻辑
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 获取数据逻辑
    }
  }
}
</script>

自定义表格组件

如果需要更灵活的控制，可以创建自定义表格组件：

<!-- CustomTable.vue -->
<template>
  <div class="custom-table">
    <div class="table-header">
      <div class="header-row">
        <div
          v-for="column in columns"
          :key="column.key"
          class="header-cell"
          :style="{ width: column.width }"
        >
          {{ column.title }}
        </div>
      </div>
    </div>
    <div class="table-body">
      <div
        v-for="(row, rowIndex) in data"
        :key="rowIndex"
        class="body-row"
      >
        <div
          v-for="column in columns"
          :key="column.key"
          class="body-cell"
          :style="{ width: column.width }"
        >
          {{ row[column.dataIndex] }}
        </div>
      </div>
    </div>
  </div>
</template>

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

以上方法涵盖了从简单到复杂的 Vue 表格实现方式，可以根据项目需求选择合适的方案。