vxe-table中vxe-grid的使用解读
作者：鸣拙
这篇文章主要介绍了vxe-table中vxe-grid的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vxe-grid的使用
渲染表格的话，不可能所有的数据都是靠自己手动生成的，需要通过v-for渲染出来，
v-for循环生成列
<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>
如果是从后端获取数据的话，推荐使用vxe-grid来渲染表格
vxe-grid生成表格
<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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。