vue2中，vue-easytable组件的使用（一）——简介和基本使用

vue2中，vue-easytable组件的使用（一）——简介和基本使用

1、简介

一个基于 Vue2.x 的表格组件

2、文档API

npm包地址——https://www.npmjs.com/package/vue-easytable

github英文地址——https://github.com/Happy-Coding-Clans/vue-easytable

github中文地址——https://github.com/Happy-Coding-Clans/vue-easytable/blob/master/README-CN.md

gitee码云中文文档——https://gitee.com/huangshuwei/vue-easytable

组件API中文文档——https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/intro

3、基本使用

官网示例地址——https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/usage

gitee示例地址——https://gitee.com/huangshuwei/vue-easytable

装包

npm install vue-easytable --save
1

src/main.js

import Vue from "vue";

// import "vue-easytable/libs/theme-default/index.css";
// import VueEasytable from "vue-easytable";
// Vue.use(VueEasytable);

import "vue-easytable/libs/theme-default/index.css";
import { VeTable } from "vue-easytable";
Vue.use(VeTable);

new Vue({
  el: "#app",
  render: (h) => h(App),
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

demo.vue

<template>
  <ve-table :columns="columns" :table-data="tableData" />
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          { field: "name", key: "a", title: "Name", align: "center" },
          { field: "date", key: "b", title: "Date", align: "left" },
          { field: "hobby", key: "c", title: "Hobby", align: "right" },
          { field: "address", key: "d", title: "Address" },
        ],
        tableData: [
          {
            name: "李世民",
            date: "1820-05-20",
            hobby: "骑马",
            address: "关中",
          },
          {
            name: "刘邦",
            date: "1790-06-20",
            hobby: "美女",
            address: "丰沛",
          },
          {
            name: "朱元璋",
            date: "1800-07-18",
            hobby: "美食",
            address: "凤阳",
          },
          {
            name: "铁木真",
            date: "1910-08-15",
            hobby: "征战",
            address: "蒙古",
          },
          {
            name: "康熙",
            date: "1720-09-27",
            hobby: "斗争",
            address: "北京",
          },
        ],
      };
    },
  };
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

效果

附：参考属性

1、html

<v-table
    :is-vertical-resize="true" 				// 设置表格的纵向自适应
    :columns="tableConfig.columns" 			// 列的集合
    :title-rows="tableConfig.titleRows"		// 表格的表头
    :table-data="tableConfig.tableData"		// 表格的数据集
    :show-vertical-border="false"			// 是否显示垂直border
    :width="1295" 							// 设置表格的宽度
    :height="540" 							// 设置表格的高度
    :min-height="500"						// 设置表格的最低高度
    row-hover-color="#eee"					// 鼠标移动到相应行时变换的颜色
    row-click-color="#edf7ff"				// 鼠标点击时变换的颜色
    :paging-index="(pageIndex-1)*pageSize"	// 当前表格列的数目
    :select-all="selectAll"					// 选择所有选项时触发的函数
    :select-change="selectChange"			// 选中某一选项时触发的函数
    :select-group-change="selectGroupChange"// 任意选中选项出发的函数
    :is-loading="isLoading"					// 数据加载时显示loading图标
></v-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、数据

tableConfig: {
    multipleSort: false,
    tableData: [],
    columns: [
   		{field: "option", width: 75, titleAlign: "center", type: "selection"},
        {field: "seqNum", width: 125, columnAlign: "center"}
    ],
    titleRows: [
        [
            {fields: ["option"], titleAlign: "center", type:"selection"},
            {fields: ["seqNum"], title: "单号", titleAlign: "center"},
            {fields: ["name"], title: "姓名", titleAlign: "center"},
            {fields: ["stuId"], title: "学号", titleAlign: "center"},
            {fields: ["tel"], title: "手机号", titleAlign: "center"},
            {fields: ["date"], title: "日期", titleAlign: "center"},
            {fields: ["reward"], title: "赏金", titleAlign: "center"},
            {fields: ["state"], title: "状态", titleAlign: "center"},
            {fields: ["comment"], title: "备注", titleAlign: "center"}
        ]
    ],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3、方法

selectChange(selection, rawData) {
    console.log(selection);
    // 若当前的行号的行被选中，则改变相应的状态
    // 如_checked由true->false
    // 或_checked由false->true
    if (rawData._checked == true) {
        for (var i = 0; i < this.tableConfig.tableData.length; i++) {
            if (rawData.seqNum == this.tableConfig.tableData[i].seqNum) {
                this.tableConfig.tableData[i]._checked = false;
            }
        }
    }
    else {
        for (var i = 0; i < this.tableConfig.tableData.length; i++) {
            if (rawData.seqNum == this.tableConfig.tableData[i].seqNum) {
                this.tableConfig.tableData[i]._checked = true;
            }
        }
    }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20