vue表格复制

最新推荐文章于 2024-06-27 10:51:27 发布
最新推荐文章于 2024-06-27 10:51:27 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： element-ui vue 文章标签： vue element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44860425/article/details/99290937
版权

列表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页面中通过双击实现复制表格中内容
bly802337的博客
08-24 901
vue页面中通过双击实现复制表格中的内容
Vue实现复制excel表格内容粘贴至网页
weixin_48174100的博客
06-22 4892
Vue实现复制excel表格内容粘贴至网页 有一个项目要求复制excel表格内容粘贴至网页表格，并且自动生成格式（合并单元格等） （别问为什么不直接上传excel表格，用户不喜欢。。。） 最后决定的做法是根据页面生成一个excel模板，如下： 上图模板前三行（我这里项目要求前三行合并）对应下图 粘贴后效果如下： 大概思路就是 1.根据项目需求在页面下载excel表格模板（用处：用户填写后复制内容并粘贴到网页端） 2.前端部分用handsontable等表格组件匹配填写数据 3.renderer下表格确保
vue复制html表格单列,VUE实现双击复制表格中内容功能
weixin_30348133的博客
06-26 524
这篇文章主要介绍了VUE页面中通过双击实现复制表格中内容，本文通过实例代码给大家介绍的非常详细。VUE页面中通过双击实现复制表格中内容页面预览：vue中代码实现：:data="tableData"height="250"borderstyle="width: 100%">prop="date"label="日期"width="180">prop="name"label="姓名"widt...
Vue 表格“框选”、“复制”、“粘贴”功能
qq_40731891的博客
05-14 362
简单实现一个具有“框选”、“复制”、“粘贴”功能的表格 首先，展示HTML代码： <template> <div class="tableContainer"> <div id="table_head" class="table_head"> <table> <thead> <tr> <th :style="{'min-width':colWidt
vue2和vue3中实现点击复制粘贴功能
qq_45585640的博客
06-27 836
vue2和vue3中点击复制粘贴
vue 复制内容
丿灬安之若死
02-04 856
yarn add vue mian.js中设置 //复制 import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 控件上面使用 <el-button type="button" v-if="!down_app_url" class="fs12" v-clipboard:copy="'下载地址：'+down_app_url" .
vue—复制功能
欢迎来到我的博客
09-03 617
最近写项目遇到了一个新需求，完成一键复制功能，这个功能在项目中说是很常见了。但是也卡了很长时间竟然。下面记录一下整个流程卡的地方 1. 首先在项目中导入clipboard npm install clipboard --save 2. 首先在项目中导入clipboard import Clipboard from 'clipboard' 写好按钮 并加上点击事件 下面 this.$refs.clipboard_pc 对应上面要点击按钮的 ref=“clipboard_pc” tip: 注.
Vue实现复制功能
weixin_45732391的博客
09-09 575
vue实现复制功能
在vue项目当中实现对某个数据的复制vue-clipboard2
任磊
12-09 319
在vue项目当中实现对某个数据的复制，运用插件是十分方便快捷的vue-clipboard2 安装 npm install --save vue-clipboard2 main.js import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 实现方式 <template> <div class="container"> <inpu
VUE页面中通过双击实现复制表格中内容的示例代码
10-15
在本文中，将详细介绍如何在Vue页面中通过双击操作实现复制表格内单元格内容的功能。这里涉及的主要知识点包括Vue.js的基本使用、双击事件的绑定以及如何实现内容的复制功能。 首先，Vue.js是一个构建用户界面的渐...
vue表格实现固定表头首列
11-02
一种常见的做法是复制首列到一个新的`div`中，这个`div`位于表格上方，具有相同的样式，但不会随表格滚动。同样，需要处理好宽度和定位问题，确保与原表格同步。 5. **响应式设计**：对于移动端，我们需要考虑不同...
复制excel内容粘贴到html表格中的输入框里
12-23
实现将复制的excel的内容粘贴到html 表格的输入框中的功能
ag-grid-vue表格的一些问题总结（一）
01-08
ag-grid-vue表格的一些问题总结 1.表头居中和表格内容居中 找了很多资料也没有找到 在style标签中输入下面代码,就会居中。 /deep/ .ag-theme-balham [class^='ag-'], .ag-theme-balham [class^='ag-']:focus, .ag-...
使用Vue3实现一个可复制的表格
小王的技术库
02-20 1557
表格是前端非常常用的一个控件，但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的。同时，基础的table样式通常也是不满足需求的，因此一个好的表格封装就显得比较重要了。最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
vue下实现复制功能
热门推荐
往后橘生
05-16 1万+
一、说明：vue下想要实现复制功能有很多种方法，比如vue-clipboard2等。但是如果你不想使用插件，我们也可以利用document.execCommand来实现此功能。二、简介：当一个HTML文档切换到设计模式 designMode时，文档对象暴露 execCommand 方法，该方法允许运行命令来操纵可编辑区域的内容。三、使用 methods: { CopyUrl(){ ...
vue -复制、粘贴
weixin_43843679的博客
09-21 227
1、安装 npm install --save vue-clipboard2 2、在main.js中引入 import VueClipboard from “vue-clipboard2”; Vue.use(VueClipboard); 3、使用，如： <a @click.stop=“copyMac(val)”>复制 /** * 复制 */ copyMac(val) { var _this = this; this.KaTeX parse error: Expected '}', got 'EO
vue实现excel表格复制粘贴
zzzz121380的博客
07-20 4568
说明想要实现从excel表格复制内容之后，在vue页面上粘贴。有两个情况（1）无论从哪一列点击开始粘贴，都是从点击的列开始粘贴。效果如上图1（2）点击哪一列开始粘贴，从此列开始粘贴，如果点击的列不是可以粘贴的列，那么也是从可以粘贴的列开始粘贴（只能点击可以粘贴列的前面列才可以粘贴，点击后面列不能粘贴）效果如上图2注意如果多列需要粘贴，那么这些列必须是。比如columns=[name,key,age],那么不能只粘贴{name,age},中间。.........
Vue element表格批量复制信息
u011857538的博客
06-14 296
Vue element表格批量复制内容
Vue3 Table 复制数据到Excel，可指定列和行进行复制到Excel，指定表头列 复制全部表格数据到Excel粘贴
柠檬味拥抱的博客
09-30 2176
Vue3 Table 复制数据到Excel，可指定列和行进行复制到Excel，指定表头列 复制全部表格数据到Excel粘贴
Vue实现复制excel表格内容粘贴至el-table
最新发布
09-15
在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、付费专栏及课程。

余额充值