el-table如何实现自动缩放,提示隐藏内容

前提问题:大屏展示中某一个区域是表格内容,当放大或缩小网页大小时,表格宽度随之缩放,但表格内容未进行缩放,需要表格内容与网页大小同时进行缩放,且表头和表格内容宽度不够未显示全时,需要进行提示

解决过程:使用min-width,resizable为false,可以解决自由宽度缩放问题,show-overflow-tooltip解决表格内容未显示全用省略号代替时,提示全部内容,使用v-slot:header插槽,插入表头需提示内容

解决结果:

<el-table-column prop="ss" label="无人机架次" align="center" :min-width="60" :resizable="false" show-overflow-tooltip>
    <template v-slot:header>
        <el-tooltip content="无人机架次" placement="top-start" effect="dark">
            <span>无人机架次</span>
        </el-tooltip>                        
    </template>
</el-table-column>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果您在使用 Vue.js 框架,可以使用 Element UI 的 `el-table` 组件来实现自动滚动显示的表格。具体的步骤如下: 1. 引入 Element UI 库,在代码中注册 `el-table` 组件。 2. 在 `el-table` 组件中使用 `max-height` 和 `height` 属性设置表格的高度。 3. 在 `el-table` 组件中使用 `scroll` 属性启用横向和纵向滚动条。 4. 在 `el-table` 组件中使用 `header-fixed` 和 `footer-fixed` 属性设置固定的表头和表尾。 5. 在 `el-table` 组件中使用 `v-loading` 属性设置加载状态。 例如,以下是一个实现自动滚动显示的 `el-table` 组件的示例代码: ```html <template> <div> <el-table :data="tableData" style="width: 100%; max-height: 200px; height: auto;" :header-fixed="true" :footer-fixed="true" :scroll="{ x: '100%', y: 200 }" v-loading="loading"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> import { reactive } from 'vue' export default { setup() { const state = reactive({ loading: true, tableData: [] }) // 模拟异步数据加载 setTimeout(() => { state.tableData = [ { name: '张三', age: 20, address: '北京市海淀区' }, { name: '李四', age: 25, address: '上海市浦东新区' }, { name: '王五', age: 30, address: '广州市天河区' }, { name: '赵六', age: 35, address: '深圳市南山区' }, { name: '钱七', age: 40, address: '成都市武侯区' } ] state.loading = false }, 2000) return { ...state } } } </script> ``` 希望这个回答能够解决您的问题!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值