vue el-table如何给Tooltip 文字添加复制按钮

最新推荐文章于 2025-03-12 09:16:27 发布

一只前端小菜鸡.

最新推荐文章于 2025-03-12 09:16:27 发布

阅读量1.5k

点赞数 2

分类专栏：前端 vue3.0 vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_49826079/article/details/132318735

版权

vue3.0 同时被 3 个专栏收录

7 篇文章

订阅专栏

前端

6 篇文章

订阅专栏

vue

6 篇文章

订阅专栏

本文描述了如何在项目中处理长数据复制需求，通过结合el-table的自适应显示和el-tooltip进行提示，同时实现数据复制功能，包括代码实现和字符串截取方法的选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接项目需求要让用户可以点击按钮复制该条数据的名称。

需求 1. 该条数据过长，不允许他换行，超过表格内容用...显示鼠标移上去显示提示信息

需求 2. 允许该条数据复制

思路：1. 使用el-table表格自带的功能 show-overflow-tooltip 超出部分自动显示...。但是有问题，就是复制功能不能实现。

2.直接pass掉此方法，直接用el-tooltip提示信息再加上插槽能实现提示+复制功能

3.使用el-tooltip方法，就需要操作显示内容来控制长度

代码实现：

1. 提示信息：

<el-table-column
              min-width="160"
              prop="rule"
              property="资产定义"
              label="名称"
            >
              <template #default="scope">
                <div>
                  <!-- {{ scope.row.rule }} -->
                  <el-tooltip placement="top" popper-class="top-tooltip">
                    <template #content>
                      {{ scope.row.rule }}
                      <el-button
                        link
                        type="primary"
                        icon="Edit"
                        @click="copyData(scope.row)"
                      >
                        复制
                      </el-button>
                    </template>
                    {{
                      scope.row.rule.substring(
                        0,
                        Math.min(60, scope.row.rule.length)
                      ) + '...'
                    }}
                  </el-tooltip>
                </div>
              </template>
            </el-table-column>



//控制提示框宽度
<style>
.top-tooltip{
  font-size: 14px !important ;
  max-width: 500px !important ;
}
</style>

2.复制功能：

const copyData = row => {
  console.log(row); //每一行的数据
  var Url2 = row.rule; //每一行的某个值，如选中的当前行的url
  var oInput = document.createElement('input'); //创建一个隐藏input（重要！）
  oInput.value = Url2; //赋值
  console.log(oInput.value);
  document.body.appendChild(oInput);
  oInput.select(); // 选择对象
  document.execCommand('Copy'); // 执行浏览器复制命令
  oInput.className = 'oInput';
  oInput.style.display = 'none';
  ElMessage.success('复制成功');
};

注意：内容过长，可以用截取字符串的方法，以下为两种方法，自行选择

1. 字符串的 slice 方法

const str = "http://v9-non80-e.toutiaovod.com/$(param)
/64db0b4c/video/tos/cn/tos-cn-ve-0022/o4rEQzbISTNlAUy1XfUxAChBazKntIAbsQAsDh";
const truncatedStr = str.slice(0, 60);
console.log(truncatedStr);


注意：如果字符串的长度不足60个字符，slice 方法将返回整个字符串

2. 使用 substring 方法

const str = "http://v9-non80-e.toutiaovod.com/$(param)
/64db0b4c/video/tos/cn/tos-cn-ve-0022/o4rEQzbISTNlAUy1XfUxAChBazKntIAbsQAsDh";
const truncatedStr = str.substring(0, Math.min(60, str.length));
console.log(truncatedStr);


//想确保截取的长度不超过60个字符