iview表格批量复制粘贴

iview表格批量复制粘贴

1. 页面引入jq，vue cli项目先npm install jquery --save，再在页面中引入jq
2. 表格盒子外设置id（方便jq绑定盒子内部的粘贴事件），页面初始化给盒子绑定粘贴调用事件。
   注意要在mounted初始化粘贴事件，否则粘贴事件会绑定不了

mounted(){
	$("#tablebox").bind({paste: this.onPaste})
},

3. 表格尽量用slot渲染，方便进行事件而截断，浏览器中能够进行粘贴事件的一般都是输入框，所以表格输入框进行粘贴操作时，进行粘贴截断，onpaste = "return false"阻止复制内容粘贴进入输入框

 <template slot-scope="{ row, index }" slot="NAME">
	<span v-if="!row.editBox">{{row.NAME}}</span>
	<span v-else>
		<i-input v-model="row.NAME" placeholder="请输入名称" onpaste = "return false"></i-input>
	</span>
</template>

4. 阻止复制内容粘贴后，进入获取复制内容，并处理该内容

//表格内容自动粘贴
onPaste(e){
	// 定义变量获取剪切板文字
	let data = null;
	// 定义变量获取剪切板信息
	let clipboardData = window.clipboardData; // IE
	if (!clipboardData) { //chrome
		clipboardData = e.originalEvent.clipboardData
	}
	// 获取剪切板内容
	data = clipboardData.getData('Text');
	//获取到的内容通过/[(\r\n)\r\n\s]+/分割成多个数组内容
	let code = data.split(/[(\r\n)\r\n\s]+/);
	let list = [];
	//获取数组长度，若复制了多行excel表格内容，需要将code合理分为二维数组
	let len = code.length;
	let n = 10; //假设每行显示10个
	let lineNum = len % 10 === 0 ? len / 10 : Math.floor( (len / 10) + 1 );//得到行数
	for (let i = 0; i < lineNum; i++) {
		let temp = code.slice(i*n, i*n+n);
		if(temp[0]!=''){
			list.push(temp);
		}
	}
	this.pasteInfo(list)
},
pasteInfo(list){
	if(list){
		//这里是倒序从第一行上插入内容，
		for(var i= list.length-1;i>=0;i--){
			var data = {
				ID:'',//新增id为空
				TYPE:list[i][0] ? list[i][0]:"",//类型，
				CODE:"",//需要获取
				NAME:list[i][1] ? list[i][1] :"",//名称
				CORP_ID:'',//公司id
				CORP_CODE:"",//公司代码
				CORP_NAME: list[i][2] ? list[i][2] :"",//公司名称
				DEPT_ID:'',//部门id
				DEPT_CODE:'',//部门代码
				DEPT_NAME: list[i][3] ? list[i][3] :"",//部门名称
				deptList: list[i][2] ? this.changeCrop(list[i][2]):[],
				POST_ID:'',//岗位id
				POST_NAME: list[i][4] ? list[i][4] :"",//岗位名称
				POST:'',//职位
				START_TIME: list[i][5] ? list[i][5] :"",//开始时间
				END_TIME: list[i][6] ? list[i][6] :"",//结束时间
				PRO_TYPE:'',//提升平台
				IMPORT_LEVEL:list[i][7] ? list[i][7] :"",//重要度等级
				SCORP: list[i][8] ? Number(list[i][8]) :"",//自我评分
				SCORP_DATE:"",//评分时间
				LEADER_ID:'',//领导id
				LEADER_NAME:"",//领导名字
				LEAD_SCORP: "",//领导评分
				APPENDIX_ID:'',//附件ID
				DESCRIPTION:list[i][9] ? list[i][9] :"",//备注
				editBox:true,//是否编辑
				_checked:true,//默认选中
			}
			this.TXJSData.unshift(data);
		}
	}
	
},