elementUi可编辑table

因为项目需要，很多时候，其实都需要用到table在线编辑。另外本人比较喜欢写注释，所以就不做过多的解释了，下面就直接看代码（复制可用的）

element-ui官网：https://element.eleme.io/#/zh-CN/component/table

1、html代码

<el-table :data="tableData" border style="width: 100%;">
	<el-table-column header-align="center" prop="itemName" label="票种名称">
		<template slot-scope="{row,$index}">
			<el-input v-if="ticketsIndex == $index" v-model="row.itemName"></el-input>
			<span v-if="ticketsIndex != $index">{{row.itemName}}</span>
		</template>
	</el-table-column>
	<el-table-column header-align="center" prop="price" label="票价">
		<template slot-scope="{row,$index}">
			<el-input v-if="ticketsIndex == $index" v-model="row.price"></el-input>
			<span v-if="ticketsIndex != $index">{{row.price}}</span>
		</template>
	</el-table-column>
	<el-table-column header-align="center" prop="address" label="数量">
		<template slot-scope="{row,$index}">
			<el-input v-if="ticketsIndex == $index" v-model="row.address"></el-input>
			<span v-if="ticketsIndex!= $index">{{row.address}}</span>
		</template>
	</el-table-column>
	<el-table-column fixed="right" label="操作">
			<template slot-scope="{row,$index}">
				<el-button v-if="ticketsIndex == $index" @click="ticketsClick($index,'save')" type="text" size="small">保存</el-button>
				<el-button v-if="ticketsIndex != $index"  @click="ticketsClick($index,'edit')" type="text" size="small">编辑</el-button>
				<el-button @click="ticketsClick($index,'delete')" type="text" size="small">移除</el-button>
			</template>
	</el-table-column>
</el-table>
<div class="textCenter">
	<br />
	<el-button type="primary" plain @click="addTickets">+ 添加票种</el-button>
</div>

2、js代码

<script>
	export default {
		components: {//全局注册
		},
		data() {
                    return {
                        tableData:[],//table数组
                        ticketsIndex:0,//票种table当前正在编辑的行				
                    }
		},
		created: function() { //在模板渲染成html前调用。执行顺序:父组件-子组件
		},
		mounted() { //在模板渲染成html后调用。执行顺序:子组件-父组件	
		},
		methods: { //监听方法click事件等，执行drawFeatures方法
			ticketsClick($index,now){//票种点击事件
				if(now == 'save'){//表示当前点击的是保存按钮
					this.ticketsIndex=null;//把正在修改的行，置为只读状态
				}
				if(now == 'edit'){//表示当前点击的是修改按钮，把当前行置为编辑状态
					this.ticketsIndex=$index;
				}
				if(now == 'delete'){//表示当前点击的是删除按钮
					this.tableData($index,1)
				}
			},
			addTickets(){//添加一行票种
				if(JSON.stringify(this.tableData[this.tableData.length-1])!='{}'){
					var obj={};
					this.tableData.push(obj);
					this.ticketsIndex=this.tableData.length-1;//默认编辑当前添加的那条数据
				}else{
					this.$message.warning('已经存在一条空数据了!');//失败提示后端返回消息
				}
			},        
		},
		watch: { //去监听一个值的变化，然后执行相对应的函数

		},

	}
</script>