精华内容
下载资源
问答
  • width属性改为自适应,该列宽度自适应浏览器宽度 <el-table-column lable="xx" width="auto"> width属性改为固定宽度,则不自适应浏览器宽度,会增加横向滚动条 <el-table-column lable="xx" width="1000...

    width属性改为自适应,该列宽度自适应浏览器宽度

    <el-table-column lable="xx" width="auto">
    

    width属性改为固定宽度,则不自适应浏览器宽度,会增加横向滚动条

    <el-table-column lable="xx" width="1000px">
    
    展开全文
  • Element UI的表格table列的宽度自适应设置

    万次阅读 热门讨论 2018-03-23 16:05:22
    不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column> ...el-table-column prop="login_id" width="110px" align="center" label="工号...

    不要设置  width="110px"

     

    <el-table-column prop="login_id" align="center" label="工号"> </el-table-column>

     

     

     

     
     
    展开全文
  • 内部表格使用element-ui在的el-table,el-table列宽须设置为最小宽度才能在最大化窗口时列表中列宽自适应window窗口的宽度,否则就是扒在一堆的,很难看。<el-table-column v-for="(item,index) in label" :key=...

    外层使用easyui框架中window组件,便于使用最大化功能;内部表格使用element-ui在的el-table,el-table列宽须设置为最小宽度才能在最大化窗口时列表中列宽自适应window窗口的宽度,否则就是扒在一堆的,很难看。

     

    <el-table-column v-for="(item,index) in label"
    :key="index"
    :prop="item.prop"
    :label="item.name"
    :min-width="item.width"
    align="center"
    :show-overflow-tooltip="true"
    >
    </el-table-column>

    字段写法

    {
    name: "温度值",
    prop: "temValue",
    width: "100",
    type: "em_input",}

    转载于:https://www.cnblogs.com/LindaBlog/p/10973498.html

    展开全文
  • table表格组建,列宽度自适应文本   嘿嘿,官方文档 不知道怎么用,我反正用了没有生效(2018.11.26)在官网测试的(找了一个最简单的例子,利用官方的在线运行测试,gg,没效果,顿时不知道这个属性是做什么...

    "element-ui": "^2.4.1"

    "vue": "^2.5.16"

     

    问题

    table表格组建,列宽度自适应文本

     

    嘿嘿,官方文档

    不知道怎么用,我反正用了没有生效(2018.11.26)在官网测试的(找了一个最简单的例子,利用官方的在线运行测试,gg,没效果,顿时不知道这个属性是做什么用的了)

     

    网上还有资料显示,最简单的方式,就是去掉列的宽度设置,看了几个,发现都是“蔡俊锋”这位前辈的博客,反正我这个环境是奇葩的都不行,所以自己来

     

    思路:

    遍历所有所有该列的单元格宽度,将最宽的宽度设置为该列的宽度

    1.需要设定该列不换行  “show-overflow-tooltip”

    2.需要一个判断文本的宽度,可以根据元素的字号*字数计算,我怕这里耽误时间,所以使用插槽的方式,包裹一个层span,计算span的宽度,就比较有保障,为了定位到span节点,采用了列的class-name属性,来给该列的单元格加上一个标记

    3.使用双向绑定的方式,设置列的宽度  :width="xxxx"

    4.找一个时机,计算该列的所有单元格最大的宽度设置为列的宽度,我的方式是监听table的data

     

    注意:

    计算最大宽度的时候,注意doc要先更新完成,所以要使用Vue.nextTick

    宽度注意最小宽度,表头还占着宽度呢,本来想表头也放到计算里面,尝试了几个方式又是我的环境无法正确响应,比如slot="header" 设置无效,再比如render-header这个东西,直接吧<span>当成文本显示了,目前还没有找到如何让他解析html的方式,如果哪位又麻烦回复一下我,thank

     

    实现:

    
    <el-table-column label="组号" :width="drugColumnWidth.groupNo" align="center" class-name="table-drugs-groupno" show-overflow-tooltip>
        <template slot-scope="scope">
            <span>{{scope.row.groupNo}}</span>
        </template>
    </el-table-column>
     

    动态设置宽度

    设置居中是为了在留出容错宽度的时候,不会显得这么空,特别我的组号还存在还是一位数字的列 

    设置列的单元格class,为了后期方便查找元素

    给单元格的文本,增加span,为了计算宽度

    
    watch:{
        "你的data":{
            var drugColumnMaxWidth = {
              groupNo: 29
            };
    
            try {
              for (let i = 1; i <  document.getElementsByClassName("table-drugs-groupno").length; i++){
                const element =  document.getElementsByClassName("table-drugs-groupno")[i];
                drugColumnMaxWidth.groupNo=drugColumnMaxWidth.groupNo<element.querySelectorAll('span')[0].offsetWidth
                ?element.querySelectorAll('span')[0].offsetWidth:drugColumnMaxWidth.groupNo;
              }
              //避免宽度小数+1,计算变宽宽度+1,20是内边距;+5是为了容错
              this.drugColumnWidth.groupNo=drugColumnMaxWidth.groupNo+2+20;
            } catch (error) {
              console.error(error);
            }
        }
    }
     

    +2+20,20是单元格的内边距,+2包含了两个,一个是offsetWidth没有小数,但是宽度会又小数,怕offsetWidth小于实际宽度;还有1,是边框;   

     

    上面的写法还恨粗糙,还需要把他继续封装,今天就提供个思路,供大家使用

    另外不是特殊要求,不建议这么使用,感觉太多的计算,影响性能

    展开全文
  • 好了,话不多说,我要实现的是既有最小宽度,又可以按百分比适应宽度,以便表格兼容移动端,更好的显示。 按照element-ui的文档: width是固定宽度,min-width最小宽度,呃,大家都知道,但我为什么会采坑呢? 1:...
  • element UI-table表格列宽自适应

    万次阅读 热门讨论 2019-07-08 11:30:52
    1.element UI关于表格宽度的可以使用width和show-overflow-tooltip(超出部分悬浮显示) 以及列宽自适应的fit,但是这个属性不好使,也不知道为什么 2.查了一些资料,发现有用width的有自己写的(本人小白看不...
  • <el-table-column prop="chineseName" header-align="center" align="center" label="单位名称" :width="flexColumnWidth('chineseName',this.... // 自适应表格列宽 flexColumnWidth(str, tableData, flag =
  • 关于vue+element-ui写表格,要求列宽度自适应,不换行那种的,求大神指教,现在已经想了一天了,暂时还没有好办法,主要是我的数据还是动态的,可编辑的表格,编辑过后要立刻适应数据的宽度。 求大神帮助,...
  • element表格样式修改

    2020-12-11 15:09:57
    element表格常用样式修改 width设置 表格每列宽度设置 一般写死宽度直接 width='xxx' 但是设置百分比无效 设置百分比 min-width='xx%' min-width 是会按照比例分配剩余宽度的,也就是自适应 min-width='2' 也可以...
  • element-ui Table自适应

    千次阅读 2019-04-10 22:59:06
    在一个宽高自适应的容器内引入Table组件,容器的宽度和高度不定,需要Table的宽和高随容器大小变化而变化,容器过小时,表格出现滚动条; 解决思路: element-ui的Table组件默认宽度100%,主要解决高度问题,在...
  • 说明 本文的为我的操作理解,若有不足支持请指正,谢谢。...业务需求 ...之前使用的导出方法是【 js-xlsx】和【file-saver】插件 前端导出数据到excel。此导出是根据页面上已渲染好的页面,获取document的id节点进行导出。...
  • element table 列宽根据内容自适应

    千次阅读 2020-04-22 12:02:34
    我上一篇发布如何优化官网写的table表格的写法,但是他的列宽不能自适应,于是我觉得官网会增加某个属性控制列宽 我试了 直接加 fit 或者 :fit="true"都不好使,我看到网上有些人去动态计算内容的宽度,但是效果...
  • 最近在开发一个项目,...1. 页面使用了三栏布局,最右边的表格需要自适应,左边两栏都是固定宽度,因此我使用了flex布局,el-table外层使用了一个div,样式都加载这个div中,这时遇到一个问题,那就表格无法自适应...
  • 在调试ie兼容性的时候发现当没有加载表格数据只有表头时显示正常,但当加载数据后,表格一直抖动而且宽度持续增加。默认fit=true,把fit设置为false后是不会抖动了,但列不能充满表格。 Debug:通过控制台发现组件...
  • 之前都是用iview开发项目较多,用element开发发现table表格自定义表格并不是那么好用,看了iveiw的源码后 加入render,结合之前遇到种种问题,二次...表格自适应高度 标题自适应宽度 加入了多选择全选并且在分页的时...
  • 问题:不设置表格宽度让其自适应,如果列标题文字过多,首次加载的时候不会出现问题,第二次加载后会出现 底部吞并一行的问题 正常情况下: 第二次加载: 解决:给标题文字过多的一列设置固定宽度 ...
  • element UI table表格组件使用[超级完整功能]

    万次阅读 热门讨论 2017-09-03 19:01:01
    8.表格宽度自适应 9.表格选中事件 …. 注明重要!重要!:未使用模块化方式,属于渐进式使用,结合element ui组件,属于入门应用,如果要使用模块化开发或者模版语法等严格需编译的es6语法请移步! 未使用模块化...
  • 探索el-table列宽自适应内容的实现

    万次阅读 2019-05-26 12:59:58
    最近项目上线之后,产品对首页的列表提出了列宽自适应内容的需求,即列的宽度由当前列中内容最宽的一个单元格决定(单元格内容不换行)。项目中的表格使用的是element-ui的table组件,非常强大,满足了各种各样的...
  • Element UI 是 PC 端比较流行的 Vue.js UI 框架,它的组件库基本能满足大部分常见的业务需求。但有时候会有一些定制性比较高的需求,组件本身可能没办法满足。最近在项目里就碰到了。 很多页面都需要用到表格组件el-...
  • el-table, flex,缩放浏览器, 宽度自适应
  • 但有时单条数据的内容会很多,不希望每个表格的高度不一致,所以有了希望根据表格数据最长的长度来设置表头宽度的需求。 这里是利用了一个插件ExTableColumn,具体操作方法: 通过继承实现el-table-column列宽根据...
  • 前情提要 leader提出,希望表头文本能够将列宽适应内容宽度变长,而非换行显示。接收到需求,首先去...表格宽度时,列宽是否撑开以填满表格宽度。效果如下图: fit=“true” fit=“false” 没有发现element有提

空空如也

空空如也

1 2
收藏数 36
精华内容 14
关键字:

element表格自适应宽度