elementUI表格双击复制文字

当elementUI表格文字设置了省略号显示的时候,复制文字是麻烦事

解决办法:

1. 在<el-table>标签上加上@cell-dblclick="handleDblClick" 方法,这是elementUI带的双击方法

<el-table @cell-dblclick="handleDblClick">

2. 在页面的不起眼的位置加上一个输入框或者textarea

<!-- 单击复制需要改输入框,隐藏了 -->
<textarea id="input" style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;">这是幕后黑手</textarea>

3. 方法里贴上这段代码

methods: {
    // 双击表格复制内容
    handleDblClick(row, column, cell, event){
      if(column.property){
        var text = event.target.innerText
        var input = document.getElementById("input");
        input.value = text; // 修改文本框的内容

        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令

        this.$notify.success({
          title: `${text}`,
          message: `已复制到剪贴板`,
          // showClose: false
        });
      }
      
    },
  }

 这就完事了,效果如下

 

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现elementui table双击表数据在线编辑,你可以使用elementui提供的table组件自带的edit配置项。具体实现步骤如下: 1. 在table的el-table-column中设置prop和label属性,prop表示该列对应的数据字段,label表示该列的表头。 2. 在table的el-table-column中设置editable属性为true,表示该列可编辑。 3. 在table的el-table-column中设置edit-setting属性,该属性值为一个对象,包含type、options、min和max等属性,type表示该列编辑的类型,可以是text、textarea、number、select等;options表示下拉菜单的选项,min和max表示数字类型的最小值和最大值。 4. 在table的el-table-column中设置edit-rules属性,该属性值为一个数组,表示该列的校验规则,可以使用elementui提供的一些校验规则或者自定义校验函数。 5. 在table的el-table-column中设置formatter属性,该属性值为一个函数,用于格式化该列的数据显示,这个不是必须的。 6. 在table的el-table-column中设置editable属性为true,表示该列可编辑。当用户双击该列时,该列会自动进入编辑状态,用户可以修改该列的值。用户修改完毕后,可以点击enter键或者点击其他地方使该列退出编辑状态,修改的数据会自动保存到表格中。 7. 在table的el-table-column中设置edit-cancel-text和edit-confirm-text属性,分别表示取消和确认按钮的显示文本。 下面是一个示例代码: ```html <template> <el-table :data="tableData"> <el-table-column prop="name" label="姓名" :editable="true" :edit-setting="{type: 'text'}"></el-table-column> <el-table-column prop="age" label="年龄" :editable="true" :edit-setting="{type: 'number', min: 1, max: 100}" :edit-rules="[{required: true, message: '请输入年龄', trigger: 'blur'}]"></el-table-column> <el-table-column prop="gender" label="性别" :editable="true" :edit-setting="{type: 'select', options: [{value: '男', label: '男'}, {value: '女', label: '女'}]}"></el-table-column> </el-table> </template> ``` 这样就可以实现elementui table双击表数据在线编辑了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值