vue表格复制

列表1选中后的数据复制给表格2

tableData110表格1的数据,选中后复制到dataList表格2上面

<!--表格1-->
                    <div v-if='flag == 1'>
                        <el-table
                        :data="tableData110"
                        @selection-change="changeFun"
                        height="365"
                        border
                        style="width: 100%">
                            <el-table-column show-overflow-tooltip type="selection" width="55"></el-table-column>  
                            <el-table-column show-overflow-tooltip prop="importNum" label="导入批次号" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="partnerCompanyName" label="公司全称/姓名" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="companyTypeText" label="合作商类型" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="unionCode" label="信用代码/身份证" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="serviceTypeName" label="服务类型" width="180"></el-table-column>                       
                        </el-table>
                        <!--列表1分页-->
                        <div class="block">
                        <el-pagination
                                align='center'
                                @size-change="handleSizeChange110"
                                @current-change="handleCurrentChange110"
                                :current-page="currentPage110"
                                :page-sizes="[10,50,100,500]"
                                :page-size="pageSize110"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total110">
                        </el-pagination>
                        </div>
                    </div>

<!--将表格1选中的数据复制给列表2-->
                    <div>
                        <el-table
                        :data="dataList"
                        height="365"
                        border
                        style="width: 100%">
                            <el-table-column show-overflow-tooltip type="selection" width="55" v-if="false" ></el-table-column> 
                            <el-table-column show-overflow-tooltip prop="importNum" label="导入批次号" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="partnerCompanyName" label="公司全称/姓名" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="companyTypeText" label="合作商类型" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="unionCode" label="信用代码/身份证" width="180"></el-table-column>
                            <el-table-column show-overflow-tooltip prop="serviceTypeName" label="服务类型" width="180"></el-table-column>                        
                        </el-table>
                        <!--分页2-->
                        <div class="block">
                        <el-pagination
                                align='center'
                                @size-change="handleSizeChange110"
                                @current-change="handleCurrentChange110"
                                :current-page="currentPage"
                                :page-sizes="[10,50,100,500]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="dataList.length">
                        </el-pagination>
                        </div>
                    </div>
			//获取选中结果
            getSelected() {
                return this.multipleSelection;
            },
            //点击选中的数据添加到第三步
            interiorList(){
                // 获取选中的数据
                var dataList = this.getSelected();
                if (!dataList || dataList.length == 0) {
                    alert("请先勾选数据!");
                    return false;
                }
                this.dataList = dataList        
            },
            changeFun (val) {
                this.multipleSelection = val // 返回的是选中的列的数组集合
            },
Vue中,复制Excel表格内容并粘贴到Element UI的`el-table`组件中,可以借助一些库如clipboard.js来处理复制操作,然后利用`v-model`双向数据绑定将数据同步到表格中。这里是一个简单的步骤概述: 1. 首先,你需要安装必要的依赖库,例如`vue`, `element-ui`, 和 `clipboardjs`。如果还没有安装,可以在项目目录下运行`npm install element-ui clipboard-js`。 2. 引入所需的库到你的组件中,并导入VueClipboard插件: ```javascript import Vue from 'vue' import ElementUI from 'element-ui'; import ClipboardJS from 'clipboard'; Vue.use(ElementUI); Vue.use(ClipboardJS); ``` 3. 创建一个Vue实例,并配置复制事件: ```javascript export default { data() { return { excelData: [], // 假设这是你要复制的数据 copied: false, // 标记是否已复制 } }, mounted() { this.copyToClipboard(); }, methods: { copyToClipboard() { const clipboard = new ClipboardJS('.your-copy-button'); clipboard.on('success', () => { this.copied = true; setTimeout(() => { this.copied = false; // 如果需要清除复制标志,可以在这儿清除 }, 1000); // 或者设置自定义时间清除 }); }, handlePaste(event) { event.preventDefault(); // 阻止浏览器默认粘贴行为 if (this.copied) { // 检查是否有复制的数据 let pastedData = event.clipboardData.getData('text/plain'); // 获取粘贴的数据 // 将pastedData解析成表格需要的格式并赋值给this.excelData // 这部分取决于你的excel数据结构 this.excelData = processPastedData(pastedData); } } }, watch: { excelData(newData) { // 当excelData变化时更新el-table this.$nextTick(() => { this.$refs.yourTableData.setDataSource(this.excelData); }); } }, template: ` <!-- ... --> <div> <button class="your-copy-button" @click="copyToClipboard">复制</button> <el-table :data="excelData" ref="yourTableData"></el-table> </div> <!-- ... --> `, } ``` 4. 在模板中添加一个复制按钮,并监听其点击事件。当用户点击复制按钮时,触发`copyToClipboard`方法。 注意:这个例子假设你已经有一个`<el-table>`并且有对应的`ref`引用(如`ref="yourTableData"`),并且你有一个函数`processPastedData`用于解析粘贴过来的数据。实际操作中,你需要根据你的数据结构调整这部分代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值