iview框架中table组件详解

在开发后台管理软件时，数据列表功能是必不可少的一项，在iview中封装了Table组件，使开发人员使用起开更加的方便，但有些需求使在文档中不太清晰的，所以我在此总结一下我在使用table组件时遇到的一些问题。

table组件的创建

<template>
<div class="table-container">
<Table border :columns="columns" :data="list"></Table>
</div>
</template>

export deflault{
data(){
return{
columns:[
{
title:'名称',
key:'name',
align:'center'
},{
title:'数量',
key:'count',
align:'center'
},{
title:'套餐内单价',
key:'price',
align:'center'
},{
title:'操作',
align:'center'
}
]
}
}
}

table中数据可编辑(input)

export deflault{
data(){
return{
list:[
{count:1}
]
columns:[
{
title:'数量',
key:'count',
align:'center',
render:(h,params)=>{
return h("Input",{
props:{
value:params.row.count
},
on:{
//失去焦点时执行
'on-blur':(el)=>{
var _that=this;
parmas.row.count=el.target.value;
_that.list[params.index]=params.row;
}
}
})
}
}
]
}
}
}

table中select选择项

export deflault{
data(){
return{
list:[
{select:'张龙'}
],
selectList:[
{"name":'张龙'},
{"name":'赵虎'},
{"name":'王朝'},
{"name":'马汉'}
],
columns:[
{
title:'操作人',
key:'operator',
align:'center',
render:(h,params)=>{
return h("Select",{
props:{
value:params.row.operator
},
on:{
//数据改变时执行
'on-change':(el)=>{
var _that=this;
parmas.row.count=el.target.value;
_that.list[params.index]=params.row;
}
},
this.selectList.map(function(item){
return h("Option",{
props:{
value:item.name
}
},item.name)
})
})
}
}
]
}
}
}

以上这两种情况时在开发时我所遇到的，在开发文档中讲的没那么详细，所以记录下来，希望对你们有所帮助