vue + el-table表格@paste.native事件实现粘贴excel数据

先看看table是长什么样子的，大概就是这个样子

然后接下来,再看看这个table的源码

	<el-table size="mini" :data="tableList" style="width:100%" max-height="500" ref="tableLists">

			<el-table-column :label="prop2" prop="prop2" width="220">
				<template slot-scope="scope">
					<el-input name="name2" v-model="scope.row.prop2" @paste.native="pasteExcel($event,scope.$index)" size="mini"></el-input>
				</template>
			</el-table-column>
			<el-table-column :label="prop3" prop="prop3" width="220">
				<template slot-scope="scope">
					<el-input name="name3" v-model="scope.row.prop3" @paste.native="pasteExcel($event,scope.$index)" size="mini"></el-input>
				</template>
			</el-table-column>
			<el-table-column :label="prop4" prop="prop4" width="220">
				<template slot-scope="scope">
					<el-input name="name4" type="text" v-model="scope.row.prop4" @paste.native="pasteExcel($event,scope.$index)" size="mini"></el-input>
				</template>
			</el-table-column>
			<el-table-column :label="prop5" prop="prop5" width="220">
				<template slot-scope="scope">
					<el-input name="name5" type="text" v-model="scope.row.prop5" @paste.native="pasteExcel($event,scope.$index)" size="mini"></el-input>
				</template>
			</el-table-column>
			
		</el-table>

当然在实现之前需要给每个控件加上name名称，或者id也是可以的@paste.native="pasteExcel($event,scope.$index)"触发事件

//这里下面的需要定义的变量
1.tableList: [] 表格对象
2. columns:[ {//这是一个表格字段的集合，这个写法需要按页面顺序排序
filed:‘name’,(字段名称)
type:‘text’,(text,date,number,el-select)
bound:true,(是否绑定值)
format:‘YYYY-mm’(日期格式)
data:[(el-select键值)
{
label:，
value:
}
]
},]:

3.如果每一行都有某个字段有默认值，
自定义一个list:设置默认值传入，就是方法中的第三个参数

		 * @param {Object} event DOM
		 * @param {Object} index scope.$index表格的索引行
		 * @param {Object} list 这个集合和表格的集合是一样的，只是上面有默认值
		 */
		pasteExcel(event, index, list) {
			var pastedText = undefined
			if (event.clipboardData && event.clipboardData.getData) {
				pastedText = event.clipboardData.getData('Text')
			} else {
				pastedText = event.originalEvent.clipboardData.getData('Text')
			}
			var rows = pastedText.split("\n")
			setTimeout(() => {
				var that = this
				let columns = that.listColumns
				let tableList = that.tableList
				let reg = /[0-9]+/g;
				let tarKeys = that.isNotEmpty(event.target.id)?event.target.id:event.target.name
				let prop = tarKeys.replace(reg, "");
				let indexIdKey = tarKeys.replace(/[^0-9]/ig, "")
				let beginIndex = index //开始行
				let rowsIndex = index //记录新增了多少行
				let oneCol = true //用于替换当前行
				for (let i = 0; i < (rows.length - 1); i++) {
					let cells = rows[i].split("\t")
					let colKey = false
					let pastedNums = 0
					let listRow = JSON.parse(JSON.stringify(list)) //copy需要初始的值
					for (let j = 0; j < columns.length; j++) {
						let column = columns[j].filed //列名
						let type = columns[j].type //类型
						let bound = columns[j].bound //是否设值
						if (prop == column || colKey) {
							let val = undefined
							try {
								if(bound){
									val = that.isNotEmpty(cells[pastedNums]) || prop == column ? cells[pastedNums] :tableList[rowsIndex][column]
										// val = cells[pastedNums]
								}
							} catch (e) {}
							if(bound){
								let nodeId = column + indexIdKey
								let name = colKey ? column : prop
								if(type == 'text'){
									listRow[name] = val
								}else if(type == 'number'){
									listRow[name] = parseFloat(val)
								}else if(type == 'date'){
									listRow[name] = that.formatDate(new Date(val),columns[j].format)
								}else if(type == 'el-select'){
									let elSelectData = Object.values(columns[j].data.options)//el-select相关
									for(let s =0; s<elSelectData.length; s++){
										let label = elSelectData[s].label
										let value = elSelectData[s].value
										if(val == label || String(val).indexOf(label) != -1 || String(label).indexOf(val) != -1){//文本对应
											listRow[name] = value
											break
										}
									}
								}
							}
							colKey = true
							pastedNums++
						}
					}
					let addRowsNum = rows.length - 1
					if (beginIndex > 0) {
						addRowsNum = rows.length - 1 + beginIndex
					}
					if (oneCol || tableList.length > rowsIndex) {//如果当前表格行存在，用一个新list把值替换掉
						oneCol = false
						let propCol = false //记录是否遍历过当前属性
						for (let t = 0; t < columns.length; t++) {
							let columnd = columns[t].filed
							if (prop == columnd) {
								propCol = true
								break
							}
							if (prop != columnd && that.isNotEmpty(tableList[rowsIndex][columnd]) && !propCol) {
								listRow[columnd] = tableList[rowsIndex][columnd]
							}
						}
						//这里我是写死回写了一个id值
						listRow['id'] = tableList[rowsIndex]['id']
						tableList.splice(rowsIndex, 1, listRow)
						rowsIndex++
					} else if (rowsIndex < addRowsNum && !oneCol) {//如果行数不够addrow
						that.addRow(listRow)
						rowsIndex++
					}
					indexIdKey++
				}
			}, 0);
		},

isNotEmpty方法是校验变量值是不不等于空
formatDate方法是转换日期格式

		addRow(list) {
			let add_list = list
			this.tableList.push(add_list)
		},

END
好了，今天快乐的工作时间开始了！