用vue实现表格

Vue 表格实现方法

基础表格实现

使用 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: 28, job: '工程师' },
        { name: '李四', age: 32, job: '设计师' },
        { name: '王五', age: 25, job: '产品经理' }
      ]
    }
  }
}
</script>

动态表格组件

创建可复用的表格组件，通过 props 接收数据，提供排序、筛选等功能。

<template>
  <div>
    <input v-model="searchText" placeholder="搜索..." />
    <table>
      <thead>
        <tr>
          <th v-for="col in columns" :key="col.key" @click="sortBy(col.key)">
            {{ col.title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td v-for="col in columns" :key="`${item.id}-${col.key}`">
            {{ item[col.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: Array,
    columns: Array
  },
  data() {
    return {
      searchText: '',
      sortKey: '',
      sortOrder: 1
    }
  },
  computed: {
    filteredData() {
      let data = [...this.data]
      if (this.searchText) {
        data = data.filter(item => 
          this.columns.some(col => 
            String(item[col.key]).toLowerCase().includes(this.searchText.toLowerCase())
          )
        )
      }
      if (this.sortKey) {
        data.sort((a, b) => {
          return a[this.sortKey] > b[this.sortKey] ? this.sortOrder : -this.sortOrder
        })
      }
      return data
    }
  },
  methods: {
    sortBy(key) {
      if (this.sortKey === key) {
        this.sortOrder *= -1
      } else {
        this.sortKey = key
        this.sortOrder = 1
      }
    }
  }
}
</script>

使用第三方表格组件

对于复杂需求，可以使用成熟的第三方表格组件库，如 Element UI 的 el-table 或 Vuetify 的 v-data-table。

以 Element UI 为例：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="age" label="年龄" width="180"></el-table-column>
    <el-table-column prop="job" label="职业"></el-table-column>
  </el-table>
</template>

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

表格性能优化

对于大数据量表格，使用虚拟滚动技术提升性能。可以借助 vue-virtual-scroller 等库实现。

<template>
  <RecycleScroller
    class="scroller"
    :items="tableData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="row">
      <div class="cell">{{ item.name }}</div>
      <div class="cell">{{ item.age }}</div>
      <div class="cell">{{ item.job }}</div>
    </div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: { RecycleScroller },
  data() {
    return {
      tableData: [] // 大数据数组
    }
  }
}
</script>

<style>
.scroller {
  height: 500px;
}
.row {
  display: flex;
}
.cell {
  flex: 1;
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>

表格编辑功能

实现可编辑表格，通过 v-model 绑定数据，或使用第三方组件如 vxe-table 提供的高级编辑功能。

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in tableData" :key="index">
        <td>
          <input v-model="item.name" />
        </td>
        <td>
          <input v-model.number="item.age" type="number" />
        </td>
        <td>
          <button @click="removeRow(index)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
  <button @click="addRow">添加行</button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 28 },
        { name: '李四', age: 32 }
      ]
    }
  },
  methods: {
    addRow() {
      this.tableData.push({ name: '', age: 0 })
    },
    removeRow(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>