vue实现表格输出

Vue 实现表格输出的方法

使用 v-for 指令渲染表格数据

在 Vue 中，可以通过 v-for 指令动态渲染表格数据。定义一个数组作为数据源，然后在模板中使用 v-for 循环输出表格行。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.job }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  }
}
</script>

动态绑定表格样式

可以通过 v-bind 动态绑定表格的样式或类名，实现条件渲染。

<template>
  <table>
    <tr v-for="(item, index) in tableData" :key="index" :class="{ 'highlight': item.age > 28 }">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.job }}</td>
    </tr>
  </table>
</template>

<style>
.highlight {
  background-color: #f0f0f0;
}
</style>

使用计算属性处理表格数据

通过计算属性对表格数据进行处理，例如排序或过滤。

<template>
  <table>
    <tr v-for="(item, index) in sortedData" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.job }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  },
  computed: {
    sortedData() {
      return this.tableData.sort((a, b) => a.age - b.age);
    }
  }
}
</script>

使用第三方表格组件

对于复杂需求，可以集成第三方表格组件如 Element UI 或 Vuetify。

<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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ]
    }
  }
}
</script>

分页和筛选功能

通过添加分页和筛选逻辑增强表格功能。

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索姓名" />
    <table>
      <tr v-for="(item, index) in filteredData" :key="index">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.job }}</td>
      </tr>
    </table>
    <div>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, job: '工程师' },
        { name: '李四', age: 30, job: '设计师' },
        { name: '王五', age: 28, job: '产品经理' }
      ],
      searchQuery: '',
      currentPage: 1,
      itemsPerPage: 2
    }
  },
  computed: {
    filteredData() {
      return this.tableData
        .filter(item => item.name.includes(this.searchQuery))
        .slice((this.currentPage - 1) * this.itemsPerPage, this.currentPage * this.itemsPerPage);
    },
    totalPages() {
      return Math.ceil(this.tableData.length / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    }
  }
}
</script>