旗舰店的网站怎么做,会展平面设计主要做什么,做兼职比较好的网站,办一家建筑公司怎么样1、效果图
可以全部复制粘贴#xff0c;也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 2、实现代码
html部分#xff1a;
templatedivel-table:datatableDataborderstylewidth: 100%:cell-class-…1、效果图
可以全部复制粘贴也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 2、实现代码
html部分
templatedivel-table:datatableDataborderstylewidth: 100%:cell-class-namegetCellIndexpaste.nativepasteInfo($event)cell-clickcellClickel-table-column propdate aligncenter label日期 width180template slot-scopescopeel-input v-modelscope.row.date placeholder单行输入 clearable //template/el-table-columnel-table-column propname aligncenter label姓名 width180template slot-scopescopeel-input v-modelscope.row.name placeholder单行输入 clearable //template/el-table-columnel-table-column propaddress aligncenter label地址template slot-scopescopeel-input v-modelscope.row.address placeholder单行输入 clearable //template/el-table-columnel-table-column propjg aligncenter label籍贯/el-table-columnel-table-column propgz aligncenter label工作/el-table-columnel-table-column propxz aligncenter label薪资/el-table-columnel-table-column propage aligncenter label年龄template slot-scopescopeel-input v-modelscope.row.age placeholder单行输入 clearable //template/el-table-columnel-table-column propsex aligncenter label性别template slot-scopescopeel-input v-modelscope.row.sex placeholder单行输入 clearable //template/el-table-columnel-table-column proptel aligncenter label电话template slot-scopescopeel-input v-modelscope.row.tel placeholder单行输入 clearable //template/el-table-column/el-table/div
/templatejs部分
script
export default {name: testDemo,data() {return {tableData: [{date: 2016-05-02,name: 王小虎,address: 上海市普陀区金沙江路 1518 弄,jg: 北京,gz: 学生,xz: 0,age: 18,sex: 女,tel: 13112345678,}, {date: 2016-05-04,name: 王小虎,address: 上海市普陀区金沙江路 1517 弄,jg: 上海,gz: 销售,xz: 10000,age: 19,sex: 男,tel: 13112345678,}, {date: 2016-05-01,name: 王小虎,address: 上海市普陀区金沙江路 1519 弄,jg: 上海,gz: 行政,xz: 5000,age: 31,sex: 男,tel: 13112345678,}, {date: 2016-05-03,name: 王小虎,address: 上海市普陀区金沙江路 1516 弄,jg: 江苏,gz: 做生意,xz: 50000,age: 48,sex: 男,tel: 13112345678,}],rowIndex: undefined,columnIndex: undefined,}},methods: {/** 设置行、列索引 */getCellIndex: function ({ row, column, rowIndex, columnIndex }) {row.index rowIndex;column.index columnIndex;},/** 点击单元格 */cellClick(row, column, cell, event) {// console.log(row, column, cell, event);this.rowIndex row.indexthis.columnIndex column.index},/** 复制粘贴 */pasteInfo(e) {try {e.preventDefault(); //阻止默认粘贴事件e.stopPropagation(); //阻止事件冒泡var data null;var clipboardData e.clipboardData || window.clipboardData; // IEif (!clipboardData) {//chromeclipboardData e.originalEvent.clipboardData;}data clipboardData.getData(Text); //复制过来的内容//首先对源头进行解析var rowStrArray data.split(\r\n); //拆成多行let rows [];for (var i 0; i rowStrArray.length-1; i) {var row [];var tdStrArray rowStrArray[i].split(\t); //按列拆分for (var j 0; j tdStrArray.length; j) {row.push(tdStrArray[j]);}rows.push(row);}// console.log(rows,---------rows)let emptyObj { //需要复制粘贴的key值列date: undefined,name: undefined,address: undefined,jg: undefined,gz: undefined,xz: undefined,age: undefined,sex: undefined,tel: undefined,}for (var j 0; j rows.length; j) {if(this.rowIndexj this.tableData.length - 1){break}let item {}item JSON.parse(JSON.stringify(this.tableData[this.rowIndexj]))let num 0let numFlag 0 //从哪一列开始粘贴全部列都可以粘贴(即从第0列可以粘贴)for (var key in emptyObj) {if (!rows[j][num]) {break}// console.log(numFlag--, numFlag, this.columnIndex--, this.columnIndex, num-, num);if (this.columnIndex numFlag) {// 针对不能修改的列字段做处理可以复制粘贴的列才做赋值。根据需求加下面的if判断if (key ! jg key ! gz key ! xz) {item[key] rows[j][num]}num num 1}numFlag numFlag 1}this.$set(this.tableData, this.rowIndexj, item)}} catch(err) {this.$message.error(请选择粘贴位置)}},}
}
/script
