如何使用Vue和Element-UI实现可编辑的数据表格-猿码集

1. 概述

随着Web应用程序的流行，数据表格成为Web应用程序中不可或缺的组件之一。在本文中，我们将学习如何使用Vue和Element-UI实现可编辑的数据表格。

2. Element-UI简介

2.1 什么是Element-UI

Element-UI是一个基于Vue.js的UI框架，它提供了丰富的组件和样式，可以帮助开发者快速构建Web应用程序。它的组件使用了许多流行的设计语言，如Material Design和Flat Design等。Element-UI的核心组件包括：表单、表格、弹框、按钮等。

2.2 Element-UI的优点

易用性：Element-UI提供了封装好的组件和样式，可以很方便地使用。

可定制性：Element-UI提供了自定义主题的功能，可以根据自己的需求修改组件的样式。

生态完善：Element-UI的生态非常完善，社区提供了大量的插件和第三方库。

3. 实现可编辑的数据表格

3.1 确定需求

在实现可编辑的数据表格之前，我们需要确定我们的需求。在本篇文章中，我们的需求如下：

显示表格数据

支持对表格数据进行增删改

支持表格数据的排序和筛选

3.2 创建Vue项目

首先，我们需要创建一个基于Vue的项目。可以使用Vue CLI来快速创建项目：

npm install -g @vue/cli vue create my-project

3.3 安装Element-UI

Element-UI可以通过npm安装：

npm install element-ui -S

安装完成后，我们需要引入Element-UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

3.4 创建数据表格组件

下面，我们将创建一个数据表格组件，用于显示表格数据：

// MyTable.vue
<template>
  <el-table
    :data="tableData"
    :header-cell-style="{background: '#f7d198'}"
    v-loading="loading">
    <el-table-column type="index" width="55"></el-table-column>
    <el-table-column
      label="姓名"
      prop="name"
      sortable
      :formatter="formatName">
    </el-table-column>
    <el-table-column
      label="邮箱"
      prop="email">
    </el-table-column>
    <el-table-column
      label="电话"
      prop="phone">
    </el-table-column>
    <el-table-column
      label="操作"
      width="120"
      fixed="right">
      <template slot-scope="scope">
        <el-button
          type="text"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          type="text"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  methods: {
    formatName(row, column, cellValue) {
      return row.name ? row.name : '-'
    },
    handleEdit(index, row) {
      // handleEdit方法用于编辑某一行数据
    },
    handleDelete(index, row) {
      // handleDelete方法用于删除某一行数据
    }
  }
}
</script>

上面的代码中，我们使用了Element-UI的el-table和el-table-column组件，它们可以帮助我们快速地创建一个数据表格。其中，el-table的:data属性用于绑定表格数据，:loading属性用于控制加载状态，el-table-column的:label属性用于设置表头名称，prop属性用于绑定行数据的字段，:formatter属性用于格式化行数据，fixed属性用于固定列。

3.5 填充表格数据

为了让表格显示数据，我们需要填充表格数据。我们可以使用Vue的生命周期函数created来获取数据。本例中，我们通过API请求获取数据：

// MyTable.vue
<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$http.get('/api/data')
        .then(response => {
          this.tableData = response.data
          this.loading = false
        })
        .catch(error => {
          console.log(error)
          this.loading = false
        })
    },
    formatName(row, column, cellValue) {
      return row.name ? row.name : '-'
    },
    handleEdit(index, row) {
      // handleEdit方法用于编辑某一行数据
    },
    handleDelete(index, row) {
      // handleDelete方法用于删除某一行数据
    }
  }
}
</script>

上面的代码中，我们在created生命周期函数中调用getData方法来获取表格数据。

getData方法通过Vue-resource发送GET请求到API，获取表格数据。

3.6 增加编辑和删除功能

在数据表格中增加编辑和删除功能非常常见。我们通过定义两个方法来实现它们。具体实现如下：

// MyTable.vue
<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$http.get('/api/data')
        .then(response => {
          this.tableData = response.data
          this.loading = false
        })
        .catch(error => {
          console.log(error)
          this.loading = false
        })
    },
    formatName(row, column, cellValue) {
      return row.name ? row.name : '-'
    },
    handleEdit(index, row) {
      // handleEdit方法用于编辑某一行数据
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.loading = true
        this.$http.delete(`/api/data/${row.id}`)
          .then(response => {
            this.loading = false
            this.$message.success('删除成功')
            this.tableData.splice(index, 1)
          })
          .catch(error => {
            console.log(error)
            this.loading = false
          })
      })
      .catch(() => {})
    }
  }
}
</script>

上面的代码中，我们使用了Element-UI的el-dialog组件来创建编辑弹框。我们还使用了Vue的$confirm方法来创建删除确认框。

3.7 实现表格数据的排序和筛选

在数据表格中，排序和筛选是非常重要的功能。我们可以通过Element-UI提供的属性来实现这些功能。具体实现如下：

// MyTable.vue
<template>
  <el-table
    :data="tableData"
    :header-cell-style="{background: '#f7d198'}"
    v-loading="loading"
    :sort-order="sortOrder"
    :sort-by="sortBy"
    @sort-change="handleSortChange"
    :filter-method="filterTable">
    <el-table-column type="index" width="55"></el-table-column>
    <el-table-column
      label="姓名"
      prop="name"
      sortable
      :formatter="formatName">
    </el-table-column>
    <el-table-column
      label="邮箱"
      prop="email">
    </el-table-column>
    <el-table-column
      label="电话"
      prop="phone">
    </el-table-column>
    <el-table-column
      label="操作"
      width="120"
      fixed="right">
      <template slot-scope="scope">
        <el-button
          type="text"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          type="text"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      sortOrder: '',
      sortBy: '',
      filterName: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$http.get('/api/data')
        .then(response => {
          this.tableData = response.data
          this.loading = false
        })
        .catch(error => {
          console.log(error)
          this.loading = false
        })
    },
    formatName(row, column, cellValue) {
      return row.name ? row.name : '-'
    },
    handleEdit(index, row) {
      // handleEdit方法用于编辑某一行数据
    },
    handleDelete(index, row) {
      this.$confirm('确定要删除该记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        this.loading = true
        this.$http.delete(`/api/data/${row.id}`)
          .then(response => {
            this.loading = false
            this.$message.success('删除成功')
            this.tableData.splice(index, 1)
          })
          .catch(error => {
            console.log(error)
            this.loading = false
          })
      })
      .catch(() => {})
    },
    handleSortChange({ column, prop, order }) {
      this.sortOrder = order
      this.sortBy = prop
    },
    filterTable(value, row, column) {
      const name = row.name.toLowerCase()
      return name.indexOf(value.toLowerCase()) !== -1
    }
  }
}
</script>

上面的代码中，我们使用了el-table的@sort-change属性来处理表格数据的排序。如果用户点击了表头排序，则会触发该事件。我们还使用了:filter-method属性来实现表格数据的筛选。当用户在搜索框中输入文字时，该方法会被触发。我们在filterTable方法中对表格数据进行筛选。

4. 结论

本文中，我们使用了Vue和Element-UI来实现一个可编辑的数据表格。我们学习了如何使用el-table和el-table-column组件来创建数据表格，如何填充表格数据，如何实现编辑和删除功能，以及如何实现表格数据的排序和筛选。

如何使用Vue和Element-UI实现可编辑的数据表格