vue实现对表格数据

在Vue中实现表格数据展示与操作

使用Element UI的el-table组件 Element UI提供了功能强大的表格组件el-table，支持排序、筛选、分页等功能。安装Element UI后可直接使用。

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

实现表格数据的分页功能 通过组合el-table和el-pagination组件实现分页效果，需处理当前页码变化事件。

<template>
  <div>
    <el-table :data="currentTableData"></el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    currentTableData() {
      return this.tableData.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

实现表格数据的动态加载 通过axios等HTTP客户端从后端API获取数据，通常配合分页使用。

methods: {
  fetchData() {
    axios.get('/api/data', {
      params: {
        page: this.currentPage,
        size: this.pageSize
      }
    }).then(response => {
      this.tableData = response.data.items
      this.total = response.data.total
    })
  }
}

实现表格数据的编辑功能 可以使用el-table-column的scoped-slot实现行内编辑，或通过弹出对话框编辑。

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

methods: {
  handleEdit(row) {
    this.editForm = Object.assign({}, row)
    this.dialogVisible = true
  },
  submitEdit() {
    // 提交编辑逻辑
  }
}

实现表格数据的筛选和排序 el-table内置了排序功能，筛选可通过自定义筛选方法实现。

<el-table-column
  prop="status"
  label="状态"
  :filters="[{text: '启用', value: 'active'}, {text: '禁用', value: 'inactive'}]"
  :filter-method="filterHandler">
</el-table-column>

methods: {
  filterHandler(value, row) {
    return row.status === value
  }
}

使用Vuex管理表格数据状态 对于复杂应用，建议使用Vuex集中管理表格数据状态。

// store.js
export default new Vuex.Store({
  state: {
    tableData: []
  },
  mutations: {
    setTableData(state, data) {
      state.tableData = data
    }
  },
  actions: {
    fetchTableData({ commit }) {
      axios.get('/api/data').then(res => {
        commit('setTableData', res.data)
      })
    }
  }
})

响应式表格数据更新 当表格数据发生变化时，Vue的响应式系统会自动更新视图。如需强制更新，可使用$forceUpdate()方法。

this.$set(this.tableData, index, newItem)
// 或
this.tableData.splice(index, 1, newItem)