如何高效使用 vxe table vue2 进行表格开发？

p：在 Vue2 项目中，vxe - table 是一款非常强大的表格组件，那么如何才能高效地使用它进行表格开发呢？下面我们来详细探讨。

安装与基本配置

p：要在项目中安装 vxe - table，可以通过 npm 或 yarn 进行安装，比如使用 npm 安装的话，命令是npm install vxe - table --save，安装完成后，在项目的入口文件（如 main.js）中进行全局引入和配置。

import Vue from 'vue'
import VXETable from 'vxe - table'
import 'vxe - table/lib/style.css'
Vue.use(VXETable)

p：这样就完成了基本的安装和全局配置，之后在组件中就可以直接使用 vxe - table 的组件了。

表格数据绑定

p：vxe - table 支持多种数据绑定方式，最常见的是通过data属性绑定数组数据。

<template>
  <vxe - table :data="tableData"></vxe - table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 }
      ]
    }
  }
}
</script>

p：如果数据是从后端接口获取的，通常在mounted钩子函数中调用接口获取数据并赋值给tableData，比如使用 axios 发送请求：

import axios from 'axios'
export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    axios.get('your - api - url').then(response => {
      this.tableData = response.data
    }).catch(error => {
      console.error(error)
    })
  }
}

列的定义与配置

（一）基本列定义

p：通过columns属性来定义表格的列，每一列可以设置field（对应数据中的字段名）、title）等属性。

<template>
  <vxe - table :data="tableData" :columns="columns"></vxe - table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 22 }
      ],
      columns: [
        { field: 'id', title: '编号' },
        { field: 'name', title: '姓名' },
        { field: 'age', title: '年龄' }
      ]
    }
  }
}
</script>

（二）列的样式与对齐方式

p：可以通过align属性设置列内容的对齐方式，如left（左对齐）、center（居中对齐）、right（右对齐），还可以通过style属性设置列的样式，比如设置列宽：

columns: [
  { field: 'id', title: '编号', align: 'center', style: { width: '80px' } },
  { field: 'name', title: '姓名', align: 'left' },
  { field: 'age', title: '年龄', align: 'right' }
]

（三）列的自定义内容

p：如果需要对列的内容进行自定义展示，比如将年龄字段展示为“年龄：XX 岁”，可以使用formatter函数。

columns: [
  {
    field: 'age', '年龄',
    formatter({ row }) {
      return `年龄：${row.age}岁`
    }
  }
]

表格的交互功能

（一）行点击事件

p：可以通过@row - click事件监听行的点击操作。

<template>
  <vxe - table :data="tableData" :columns="columns" @row - click="handleRowClick"></vxe - table>
</template>
<script>
export default {
  data() {
    // 省略 data 中的 tableData 和 columns 定义
  },
  methods: {
    handleRowClick(row) {
      console.log('点击了行：', row)
      // 可以在这里进行一些操作，比如跳转到详情页
    }
  }
}
</script>

（二）排序功能

p：vxe - table 支持列排序，只需在列定义中设置sorter为true。

columns: [
  { field: 'age', title: '年龄', sorter: true }
]

然后可以通过@sort - change事件获取排序的相关信息。

<template>
  <vxe - table :data="tableData" :columns="columns" @sort - change="handleSortChange"></vxe - table>
</template>
<script>
export default {
  data() {
    // 省略 data 中的 tableData 和 columns 定义
  },
  methods: {
    handleSortChange({ column, order }) {
      console.log('排序的列：', column.field)
      console.log('排序方式：', order)
      // 根据排序信息重新获取数据或进行数据处理
    }
  }
}
</script>

（三）筛选功能

p：同样，vxe - table 也支持列筛选，在列定义中设置filters属性。

columns: [
  {
    field: 'age', '年龄',
    filters: [
      { label: '小于 20 岁', value: age => age < 20 },
      { label: '大于 20 岁', value: age => age > 20 }
    ]
  }
]

并通过@filter - change事件获取筛选结果。

<template>
  <vxe - table :data="tableData" :columns="columns" @filter - change="handleFilterChange"></vxe - table>
</template>
<script>
export default {
  data() {
    // 省略 data 中的 tableData 和 columns 定义
  },
  methods: {
    handleFilterChange({ column, filters }) {
      console.log('筛选的列：', column.field)
      console.log('筛选条件：', filters)
      // 根据筛选条件重新获取数据或进行数据处理
    }
  }
}
</script>

分页功能

p：在实际项目中，表格数据可能很多，需要进行分页，vxe - table 提供了分页组件，首先在表格组件中添加vxe - pager组件，并进行相关配置。

<template>
  <vxe - table :data="tableData" :columns="columns">
    <template #pager>
      <vxe - pager :total="total" :page - size="pageSize" @pagination="handlePagination"></vxe - pager>
    </template>
  </vxe - table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      columns: [],
      total: 0, // 数据总条数
      pageSize: 10, // 每页显示条数
      currentPage: 1 // 当前页码
    }
  },
  methods: {
    handlePagination({ page }) {
      this.currentPage = page
      // 根据 currentPage 和 pageSize 重新获取数据
    }
  }
}
</script>

p：在获取数据时，后端接口需要根据currentPage和pageSize返回相应的数据。

p：通过以上对 vxe - table vue2 在安装配置、数据绑定、列定义、交互功能以及分页功能等方面的介绍，相信大家对如何高效使用它进行表格开发有了更清晰的认识，在实际项目中，根据具体需求灵活运用这些功能，能够快速开发出功能强大、交互友好的表格界面，提升用户体验，vxe - table 还有很多其他的高级功能，如编辑功能、导出功能等，大家可以进一步探索学习，希望这篇文章能对大家在 Vue2 项目中使用 vxe - table 有所帮助。