需求:复制table表格中的某一列或者某几列数据,然后粘贴到excel表格中(常规页面鼠标勾选复制表格,鼠标移动到第二行的时候都会从第一列开始选中,复制下来的内容包含了我们不需要的列的数据,此文针对该问题做出了解决的方法)
1:安装依赖vue-clipboard2
注意:若安装错误,并且自己电脑安装了淘宝镜像,可以使用cnpm下载安装
npm install --save vue-clipboard2
2:在main.js文件中引入vue-clipboard2
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
3:在页面中使用
(1):针对表格复制一列,并且复制按钮在表头上的操作代码
<template>
<el-table :data="tableData" style="width: 100%" @cell-click="(row, column) => copyList({column})">
<el-table-column prop="date" label="日期" width="180">
<template slot="header">
<span
>日期
<i
class="el-icon-question"
style="color:#606266;cursor:pointer;"
@click="copyList('date')"
/>
</span>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
<el-table-column prop="address" label="地址"> </el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
},
methods: {
//复制日期列
copyList(value) {
// console.log(value)
let str = ''
console.log("this.tableData",this.tableData)
this.tableData.forEach(item=>{
str += item[value]+'\n'
})
this.$copyText(str).then(function (e) {
console.log('复制成功')
}, function (e) {
console.log('复制失败')
})
}
}
};
</script>
(2)针对表格复制多列的情况的代码
<template>
<div>
<el-button @click="copyListFun" type="primary" size="small">复制</el-button>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄"
}
]
};
},
methods: {
//复制
copyListFun(){
let str = ''
this.tableData.forEach(item=>{
// \t:跳到下一制表符位置 \n:换行
str += item['name']+'\t'+item['address']+'\n'
})
console.log(str)
this.$copyText(str).then(function (e) {
console.log('复制成功')
}, function (e) {
console.log('复制失败')
})
}
}
};
</script>