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
<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] = []
htmlborder
}
// xTable[i].children = []
}
}
// this.$refs.xGrid.clearTreeExpand()
// this.$refs.xGrid.setTreeExpand(xTable[0], true)
console.log(xTable)
},
footerMethod(){
console.log(1212)
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 =lumns
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: le, 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 01px rgba(255,255,255,0.3),
01px 2px rgba(0,0,0,0.2);
box-shadow: inset 01px rgba(255,255,255,0.3),01px 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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。