vue实现模拟表格

Vue 实现模拟表格的方法

使用 v-for 动态渲染表格

在 Vue 中可以通过 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 tableData" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

使用组件化拆分表格

将表格拆分为可复用的组件，例如 TableHeader、TableRow 和 TableCell，提高代码的可维护性。

<template>
  <table>
    <TableHeader :headers="headers" />
    <tbody>
      <TableRow v-for="(row, index) in tableData" :key="index" :row="row" />
    </tbody>
  </table>
</template>

<script>
import TableHeader from './TableHeader.vue';
import TableRow from './TableRow.vue';

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

添加表格交互功能

通过 Vue 的事件绑定和方法实现表格的交互功能，例如排序、筛选和编辑。

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

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '职业'],
      tableData: [
        ['张三', 25, '工程师'],
        ['李四', 30, '设计师'],
        ['王五', 28, '产品经理']
      ],
      sortKey: '',
      sortOrder: 1
    };
  },
  computed: {
    sortedData() {
      if (!this.sortKey) return this.tableData;
      const index = this.headers.indexOf(this.sortKey);
      return [...this.tableData].sort((a, b) => {
        return (a[index] > b[index] ? 1 : -1) * this.sortOrder;
      });
    }
  },
  methods: {
    sortTable(header) {
      if (this.sortKey === header) {
        this.sortOrder *= -1;
      } else {
        this.sortKey = header;
        this.sortOrder = 1;
      }
    },
    editCell(rowIndex, cellIndex) {
      // 实现单元格编辑逻辑
    }
  }
};
</script>

使用第三方库增强功能

如果需要更复杂的功能，可以集成第三方表格库如 Element UI 或 VxeTable。

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

通过以上方法，可以灵活地在 Vue 中实现模拟表格的功能，并根据需求扩展交互和样式。