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)
						})
					})
	            }
	          }
			]
		}
	}
}

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