vxe-table的常见用法_vxe-table api

1.安装

npm install xe-utils vxe-table@2  或者  npm install xe-utils vxe-table@3  对应vue版本
网址：https://vxetable.cn/v3/#/table/api
1
2

2.高级用法

表头，表身，数据有后端生成     tableColumn表头    tableData对应的内容
1

<template>
  <div>
    <vxe-table
          border="inner"
          highlight-hover-row
          highlight-current-row
          ref="xTable"
          height="300"
          :data="tableData">
          <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>
        </vxe-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      allAlign: null,
      tableColumn: [
        { type: 'seq', width: 60, fixed: null },
        { type: 'checkbox', width: 50, fixed: null },
        { field: 'name', title: 'Name', width: 200 },
        { field: 'nickname', title: 'Nickname', width: 300 },
        { field: 'sex', title: 'Sex', width: 200 },
        { field: 'role', title: 'Role', width: 200 },
        { field: 'address', title: 'Address', width: 300, showOverflow: true }
      ],
      tableData: [
        { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
        { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
        { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
        { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 'Women ', age: 23, address: 'vxe-table 从入门到放弃' },
        { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 'Women ', age: 30, address: 'Shanghai' },
        { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 'Women ', age: 21, address: 'vxe-table 从入门到放弃' },
        { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 'Man ', age: 29, address: 'vxe-table 从入门到放弃' },
        { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 'Man ', age: 35, address: 'vxe-table 从入门到放弃' }
      ]
    }
  }
}
</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

如果v-for后端渲染，不建议这样用

<template>
  <div>
    <vxe-grid
      border
      resizable
      show-footer
      ref="xGrid"
      :footer-method="footerMethod"
      height="400"
      :tree-config="{lazy: true, children: 'children', hasChild: 'hasChild', loadMethod: loadChildrenMethod}"
      :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
      :columns="columns"
      :data="data"
    ></vxe-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      columns: [
        { type: 'seq', width: 60, fixed: 'left' },
        // { type: 'checkbox', title: 'ID', width: 140, fixed: 'left', treeNode: true },
        // eslint-disable-next-line no-undef
        { field: 'name', title: 'Name', editRender: { name: 'NameCon', event }, treeNode: true },
        { field: 'nickname', title: 'Nickname' },
        {
          field: 'role',
          title: 'Role',
          type: 'text',
          cellRender: { name: 'input' }
        },
        {
          field: 'sex',
          title: 'Sex',
          cellRender: { name: 'DICT', props: { code: 'SEX_LIST' } }
        },
        { field: 'describe', title: 'Describe', showOverflow: true }
      ],
      data: []
    }
  },
  created () {
    this.findList()
  },
  methods: {
    changeData () {
      const xTable = this.$refs.xGrid.tableData
      console.log(xTable)
      for (let i = 0; i < xTable.length; i++) {
        // xTable[i].name = '{"name":"aaaaa"}'
        xTable[i].name = 'name1'
        if (xTable[i].children && xTable[i].children.length) {
          for (let j = 0; j < xTable[i].children.length; j++) {
            // xTable[i].children[j].name = '{"name":"bbbb"}'
            xTable[i].children[j].name = 'bbb'
            // xTable[i].children[j] = []
          }
          // xTable[i].children = []
        }
      }
      // this.$refs.xGrid.clearTreeExpand()
      // this.$refs.xGrid.setTreeExpand(xTable[0], true)
      console.log(xTable)
    },
    footerMethod () {
      console.log(1212)
      return this.footerData
    },
    findList () {
      // const _this = this
      this.data = [
        {
          //         // name: 'name1',
          name: '{"name":"children"}',
          nickname: 'T1',
          role: '前端',
          sex: '1',
          age: 22,
          status: '1',
          describe: 'Address abc123',
          hasChild: true
        },
        {
          name: '{"name":"children"}',
          // name: 'name-children',
          nickname: 'Test1-1',
          role: '去掉',
          sex: '22',
          age: '0',
          status: '2',
          describe: 'Address rttry',
          hasChild: false
        },
        {
          name: '{"name":"children"}',
          // name: 'name-children',
          nickname: 'Test1-2',
          role: '测试',
          sex: '1',
          age: '26',
          status: '3',
          describe: 'Address xxxxx',
          hasChild: true
        }
      ]
      const allColumn = this.columns
      console.log(this.data)
      this.footerData = [
        allColumn.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '平均'
          }
          return columnIndex
        }),
        allColumn.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          return columnIndex
        })
      ]
    },
    loadChildrenMethod ({ row }) {
      // 模拟后台
      return new Promise(resolve => {
        setTimeout(() => {
          const childs = [
            { name: 'name-children', nickname: 'Test1-1', role: '去掉', sex: '22', age: '0', status: '2', describe: 'Address rttry' },
            { name: 'name-children', nickname: 'Test1-2', role: '测试', sex: '1', age: 26, status: '3', describe: 'Address xxxxx' }
          ]
          const rowChildren = {
            name: row.name, nickname: row.nickname, role: row.role, sex: row.sex, age: row.age
          }
          childs.push(rowChildren)
          resolve(childs)
        }, 300)
      })
    },
    linkEvent ({ row }) {
      console.log(row.name)
    }
  }
}
</script>
<style>
.progress {
  height: 10px;
  background: #ebebeb;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-radius: 10px;
}
.progress > span {
  position: relative;
  float: left;
  margin: 0 -1px;
  min-width: 30px;
  height: 10px;
  line-height: 16px;
  text-align: right;
  background: #cccccc;
  border: 1px solid;
  border-color: #bfbfbf #b3b3b3 #9e9e9e;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: -o-linear-gradient(
    top,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  background-image: linear-gradient(
    to bottom,
    #f0f0f0 0%,
    #dbdbdb 70%,
    #cccccc 100%
  );
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.progress .orange {
  background: #fe8e01;
  border-color: #fe8e02 #fe8e02 #bf6b02;
  background-image: -webkit-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: -moz-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: -o-linear-gradient(
    top,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
  background-image: linear-gradient(
    to bottom,
    #feaa41 0%,
    #fe8e02 70%,
    #fe8e01 100%
  );
}
</style>


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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225

3.常用的api

show-overflow  ：设置所有内容过长时显示为省略号
auto-resize：  自动监听父元素的变化去重新计算表格
border：是否带有边框
align： 所有的列对齐方式
resizable：列宽拖动
@resizable-change：	当列宽拖动发生变化时会触发该事件
:menu-config="tableMenu"  右击菜单配置
@menu-click=   右击菜单事件
1
2
3
4
5
6
7
8

4.行列拖拽插件

npm install sortablejs --save

<template>
  <el-table border :data="tableData" row-key="uid">
    <el-table-column
      v-for="(item, index) in columns"
      :key="`col_${index}`"
      :prop="item.prop"
      :label="item.label"
    >
    </el-table-column>
  </el-table>
</template>
<script>
import Sortable from "sortablejs";              //引入sortablejs插件
export default {
  data() {
    return {
      columns: [
        { label: "日期", prop: "date" },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
      ],
      tableData: [
        {
          uid: "a7f1730112f7c62a55e51121234f7051",
          date: "2016-05-02",
          name: "王1",
          address: "100 弄",
        },
        {
          uid: "b1v3430112f7c62a55e51121234h6789",
          date: "2016-05-04",
          name: "王2",
          address: "200 弄",
        },
        {
          uid: "c45y630112f7c62a55e51121234mi90",
          date: "2016-05-01",
          name: "王3",
          address: "300 弄",
        },
        {
          uid: "dwe2330112f7c62a55e51121234kk890",
          date: "2016-05-03",
          name: "王4",
          address: "400 弄",
        },
      ],
    };
  },
  mounted() {
    this.rowDrop();                     // 行拖拽
    this.columnDrop();                  // 列拖拽
  },
  methods: {
    rowDrop() {                                     
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const _this = this;
      Sortable.create(tbody, {
        draggable: ".el-table__row",
        onEnd({ newIndex, oldIndex }) {             //回调
          console.log(`原本位置：${_this.tableData[oldIndex].uid}`);
          console.log(`目标位置：${_this.tableData[newIndex].uid}`);
          const currRow = _this.tableData.splice(oldIndex, 1)[0];
          _this.tableData.splice(newIndex, 0, currRow);
        },
      });
    },
    columnDrop() {                                 
      const wrapperTr = document.querySelector(".el-table__header-wrapper tr");
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: (evt) => {                           //回调
          const oldItem = this.columns[evt.oldIndex];
          this.columns.splice(evt.oldIndex, 1);
          this.columns.splice(evt.newIndex, 0, oldItem);
        },
      });
    },
  },
};
</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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84