Vue表格组件Vxe-table使用技巧总结

简介

Vxe-table是一款基于Vue.js的表格组件，提供了强大的分页、排序、编辑、导入导出等功能，可以快速应用于数据管理系统等场景。

本文将总结Vxe-table的常见使用技巧，包括数据渲染、插槽、操作按钮、事件监听等，帮助快速上手Vxe-table的使用。

安装

可以通过以下命令来安装Vxe-table：

npm install xe-utils vxe-table vue-class-component moment --save

安装完成后，需要在main.js中引入Vxe-table组件：

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

Vue.use(VXETable)

基本用法

数据渲染

Vxe-table组件需要传入数据数组，可以通过vxe-table标签来渲染数据表格，如下所示：

<template>
  <vxe-table :data="data"></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: '张三', age: 18, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 22, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 31, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 25, address: '深圳市南山区' },
        { id: 5, name: '钱七', age: 28, address: '武汉市江汉区' }
      ]
    }
  }
}
</script>

列定义

若需要定义每一列的标题、字段名、宽度、对齐方式等信息，可以通过columns属性来实现，如下所示：

<template>
  <vxe-table
    :data="data"
    :columns="columns"
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: '张三', age: 18, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 22, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 31, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 25, address: '深圳市南山区' },
        { id: 5, name: '钱七', age: 28, address: '武汉市江汉区' }
      ],
      columns: [
        { field: 'id', title: '编号', width: 100, align: 'center' },
        { field: 'name', title: '姓名', width: 100, align: 'center' },
        { field: 'age', title: '年龄', width: 100, align: 'center' },
        { field: 'address', title: '住址', width: 200, align: 'center' }
      ]
    }
  }
}
</script>

插槽

Vxe-table提供了多个插槽来自定义表格的内容，如下所示：

<template>
  <vxe-table :data="data">
    <template #name="{ seq, row, rowIndex, $rowIndex }">
      {{ seq + 1 }}
    </template>
    <template #name="{ row }">
      <span :style="{ color: row.age >= 25 ? 'red' : 'green' }">{{ row.age }}</span>
    </template>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: '张三', age: 18, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 22, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 31, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 25, address: '深圳市南山区' },
        { id: 5, name: '钱七', age: 28, address: '武汉市江汉区' }
      ]
    }
  }
}
</script>

上面的示例中，使用#name的方式来指定插槽的名称，其中seq表示当前行号，row表示当前行数据，rowIndex表示当前行索引，$rowIndex表示当前行在当前数据集合中的索引。

操作按钮

Vxe-table支持向表格中添加操作按钮，可以通过toolbar属性来实现，如下所示：

<template>
  <vxe-table
    :data="data"
    :columns="columns"
    :toolbar="toolbar"
    @toolbar-click="onToolbarClick"
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { id: 1, name: '张三', age: 18, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 22, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 31, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 25, address: '深圳市南山区' },
        { id: 5, name: '钱七', age: 28, address: '武汉市江汉区' }
      ],
      columns: [
        { field: 'id', title: '编号', width: 100, align: 'center' },
        { field: 'name', title: '姓名', width: 100, align: 'center' },
        { field: 'age', title: '年龄', width: 100, align: 'center' },
        { field: 'address', title: '住址', width: 200, align: 'center' },
        { title: '操作', width: 150, slots: { customRender: 'actions' } }
      ],
      toolbar: [
        { type: 'button', text: '添加', icon: 'plus' },
        { type: 'button', text: '删除', icon: 'delete' }
      ]
    }
  },
  methods: {
    onToolbarClick(evnt) {
      if (evnt.text === '添加') {
        console.log('添加操作')
      } else if (evnt.text === '删除') {
        console.log('删除操作')
      }
    }
  }
}
</script>

上面的示例中，使用toolbar属性指定了两个操作按钮，同时在列定义中添加了slots属性，用于渲染操作按钮列；在监听@toolbar-click事件中处理操作按钮的点击事件。