当前位置：首页 > VUE

vue实现对表格数据

2026-01-20 22:29:54VUE

实现表格数据展示

在Vue中展示表格数据通常使用<table>标签或第三方组件库（如Element UI/ANT Design）。以下以原生Vue为例：

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

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

动态获取表格数据

通过API异步获取数据并更新表格：

export default {
  data() {
    return {
      tableData: [],
      isLoading: false
    }
  },
  async created() {
    this.isLoading = true
    try {
      const response = await fetch('/api/data')
      this.tableData = await response.json()
    } finally {
      this.isLoading = false
    }
  }
}

添加表格排序功能

实现客户端排序功能：

export default {
  methods: {
    sortTable(key) {
      this.tableData.sort((a, b) => {
        if (a[key] < b[key]) return -1
        if (a[key] > b[key]) return 1
        return 0
      })
    }
  }
}

实现分页功能

结合分页组件控制数据展示：

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 100
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.tableData.slice(start, start + this.pageSize)
    }
  }
}

使用Element UI表格组件

若使用Element UI可简化开发：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="job" label="职业"></el-table-column>
  </el-table>
  <el-pagination
    @current-change="handlePageChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total">
  </el-pagination>
</template>

表格数据过滤

添加搜索过滤功能：

export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(item => 
        item.name.includes(this.searchQuery) ||
        item.job.includes(this.searchQuery)
      )
    }
  }
}

表格行编辑功能

实现行内编辑：

vue实现对表格数据

<template>
  <td v-if="editing !== index">{{ value }}</td>
  <td v-else>
    <input v-model="tempValue" @blur="saveEdit(index)">
  </td>
</template>

<script>
export default {
  methods: {
    editRow(index, value) {
      this.editing = index
      this.tempValue = value
    },
    saveEdit(index) {
      this.tableData[index].value = this.tempValue
      this.editing = null
    }
  }
}
</script>