vue表格组件实现

Vue表格组件实现

基础表格实现

使用el-table组件实现基础表格功能。安装Element UI后，引入el-table和el-table-column组件。

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

表格排序功能

通过设置sortable属性实现单列排序，使用sort-method自定义排序逻辑。

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

<script>
methods: {
  customSort(a, b) {
    return a.address.length - b.address.length
  }
}
</script>

表格分页功能

结合el-pagination组件实现分页功能，通过current-page和page-size控制分页。

<el-table :data="currentTableData" style="width: 100%">
  <!-- 表格列定义 -->
</el-table>
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

<script>
data() {
  return {
    currentPage: 1,
    pageSize: 10,
    total: 100,
    allTableData: [],
    currentTableData: []
  }
},
methods: {
  handleSizeChange(val) {
    this.pageSize = val
    this.updateCurrentData()
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.updateCurrentData()
  },
  updateCurrentData() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    this.currentTableData = this.allTableData.slice(start, end)
  }
}
</script>

表格筛选功能

使用filter-method实现自定义筛选逻辑，结合filters属性定义筛选条件。

<el-table-column
  prop="status"
  label="状态"
  :filters="[
    { text: '成功', value: 'success' },
    { text: '失败', value: 'fail' }
  ]"
  :filter-method="filterStatus">
</el-table-column>

<script>
methods: {
  filterStatus(value, row) {
    return row.status === value
  }
}
</script>

表格编辑功能

通过作用域插槽实现行内编辑功能，结合v-model绑定编辑数据。

<el-table-column label="操作">
  <template #default="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
  </template>
</el-table-column>

<script>
methods: {
  handleEdit(row) {
    this.$prompt('请输入新值', '提示', {
      inputValue: row.name
    }).then(({ value }) => {
      row.name = value
    })
  }
}
</script>

响应式表格设计

使用计算属性实现响应式表格数据，根据屏幕尺寸调整显示列。

<el-table :data="tableData" :default-sort="{prop: 'date', order: 'descending'}">
  <el-table-column v-if="!isMobile" prop="date" label="日期"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

<script>
computed: {
  isMobile() {
    return window.innerWidth < 768
  }
}
</script>