1.安装
npm install xe-utils vxe-table@2 或者 npm install xe-utils vxe-table@3 对应vue版本
网址:https://vxetable.cn/v3/#/table/api
2.高级用法
表头,表身,数据有后端生成 tableColumn表头 tableData对应的内容
<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>
如果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>
3.常用的api
show-overflow :设置所有内容过长时显示为省略号
auto-resize: 自动监听父元素的变化去重新计算表格
border:是否带有边框
align: 所有的列对齐方式
resizable:列宽拖动
@resizable-change: 当列宽拖动发生变化时会触发该事件
:menu-config="tableMenu" 右击菜单配置
@menu-click= 右击菜单事件
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>