element ui 固定表头且动态计算表格高度

只需要在table 里面增加height,这样就是固定高度的固定表头;

<el-table height="600px">

动态增加表格高度的固定表头,就需要动态设置表格的高度;

<el-table :height="tableHeight">

// 在watch里面观察数组的长度,然后计算高度

  watch: {
    'tableData': {
      handler(newVal){
        if(newVal){
         this.tableHeight = this.tableData.length * 37 + 100 > 600 ? 600 :this.tableData.length * 37 + 100
        }
      },
      deep: true,
      immediate: true
    }
  },

Element UI固定表头表格如果遇到复制内容的问题,通常是由于浏览器的默认行为阻止了复制操作。要解决这个问题,可以尝试以下几种方法: 1. **禁用浏览器的默认选中事件**:在表格组件上添加 `@copystart` 和 `@copyend` 事件监听器,当用户开始和结束复制操作时阻止浏览器的默认行为。例如: ```html <el-table :fixed="true" @copystart.prevent="preventCopyStart" @copyend.prevent="preventCopyEnd"> <!-- 表格内容 --> </el-table> <script> export default { methods: { preventCopyStart() { event.preventDefault(); }, preventCopyEnd() { event.preventDefault(); } } } </script> ``` 2. **手动触发粘贴**:在复制完成后,你可以提供一个自定义的复制功能,比如通过 `clipboard.writeText` API 来模拟粘贴行为。 ```javascript import Clipboard from 'clipboard'; const clipboard = new Clipboard('.custom-copy-btn'); // 当复制操作完成 clipboard.on('success', () => { // 手动模拟粘贴,例如到剪贴板或者某个元素 const textToCopy = '这里是你想复制的内容'; document.execCommand('insertText', false, textToCopy); }); ``` 3. **隐藏不可复制区域**:如果你不想让用户复制特定列,可以设置这些列的 `copyable` 属性为 `false`。 ```html <el-table-column type="index" label="#" width="50" copyable=false></el-table-column> <!-- ... --> ``` 请注意,以上解决方案可能会改变用户的体验,建议结合实际需求来选择最适合的方式。如果有其他问题或特殊情况,可能需要具体分析原因。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值