vue实现表格界面

Vue 实现表格界面的方法

使用 Element UI 的表格组件

Element UI 提供了功能丰富的表格组件，适合快速开发表格界面。安装 Element UI 后，可以直接使用 el-table 组件。

<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: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  }
}
</script>

使用原生 HTML 表格

如果需要更轻量级的实现，可以直接使用 HTML 的 table 标签，结合 Vue 的数据绑定功能。

<template>
  <table>
    <thead>
      <tr>
        <th>日期</th>
        <th>姓名</th>
        <th>地址</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in tableData" :key="item.date">
        <td>{{ item.date }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.address }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  }
}
</script>

实现分页功能

表格数据较多时，分页功能是必不可少的。可以结合 el-pagination 组件实现分页。

<template>
  <el-table :data="currentTableData" 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>
  <el-pagination
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="tableData.length"
    layout="prev, pager, next"
  ></el-pagination>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ],
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    currentTableData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

实现表格排序

表格排序可以通过 el-table 的 sortable 属性实现，或者自定义排序逻辑。

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

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.tableData.sort((a, b) => {
        if (order === 'ascending') {
          return a[prop] > b[prop] ? 1 : -1
        } else {
          return a[prop] < b[prop] ? 1 : -1
        }
      })
    }
  }
}
</script>

实现表格筛选

表格筛选可以通过 el-table-column 的 filters 属性实现，或者自定义筛选逻辑。

<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="地址"
      :filters="[{ text: '北京市', value: '北京市' }, { text: '上海市', value: '上海市' }]"
      :filter-method="filterHandler"
    ></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  },
  methods: {
    filterHandler(value, row) {
      return row.address === value
    }
  }
}
</script>

以上方法可以根据实际需求选择使用，或者组合使用以实现更复杂的表格功能。