精华内容
下载资源
问答
  • elementui表格列的宽度
    2022-04-29 15:15:13

    思路:计算每一列表头宽度和该列每行的宽度然后取最大值;
    表格数据量过大,渲染会迟钝,建议分页

    <el-table :data="item.tableValueList.records">
    	<el-table-column v-for="it in  item.tableHeadList" 
    	:key="it.name" 
    	:label="it.name"
    	:width="setWidth(it,item.tableValueList.records)">
    	</el-table-column>
    </el-table>
    
    
    ...
    setWidth(val,data){
    	//表头长度 测试font-size为14px 一个英文字符为7.8px 单元格有20px的padding el-table 的box-sizing为border-box 所以需要加上20px
    	const labelLength = val.name.replace(/[^\x00,\xff]/g,'aa').length * 7.8+20;
    	let dataLength = data.map(({[val.code]:code}) =>{
    			//通过表头中的key去到valueList中对应的值计算长度,得到表格一列数据中的值的数组
    			return code.attrValue.replace(/[^\x00,\xff]/g,'aa').length * 7.8+20
    		})
    	if(dataLength.length>0){
    		//取一列中最大值,[].reduce会报错,所以需要判断>0
    		dataLength = dataLength.reduce((prev,next)=>{
    			return Math.max(prev,next);
    		})
    	}else{
    		dataLength = 0;	
    	}
    	//值和表头谁长返回谁
    	return dataLength > labelLength ? dataLength : labelLength;
    }
    
    更多相关内容
  • vue+elementUI 表格列自适应宽度

    效果图:

    在这里插入图片描述

    template:

    <el-table
        :data="tableData"
        ref="table"
        :cell-class-name="tableCellClassName"
        auto-fit-column
        >
          <el-table-column label="光亮" prop="guang" 
          :width="flexColumnWidth('guang',tableData)"></el-table-column>
          <el-table-column label="清水河" prop="qing" 
          :width="flexColumnWidth('qing',tableData)"></el-table-column>
          <el-table-column label="喜马拉雅" prop="xi" 
          :width="flexColumnWidth('xi',tableData)"></el-table-column>
          <el-table-column label="怕无归期怕空欢喜怕没有奇迹" prop="pawu" 
          :width="flexColumnWidth('pawu',tableData)"></el-table-column>
          <el-table-column label="物理小甜甜" prop="sugar" 
          :width="flexColumnWidth('sugar',tableData)"></el-table-column>
    
          <el-table-column label="小行星" prop="xing" :width="flexLabelWidth('小行星')"></el-table-column>
          <el-table-column label="mantian" prop="dou" :width="flexLabelWidth('mantian')"></el-table-column>
          <el-table-column label="拉萨布达拉" prop="la" :width="flexLabelWidth('拉萨布达拉')"></el-table-column>
          <el-table-column label="空欢喜怕没有奇迹" prop="kong" :width="flexLabelWidth('空欢喜怕没有奇迹')"></el-table-column>
        </el-table>
    

    data:

    data() {
        return {
          tableData:[
            {
              guang:"有了光才有了亮",
              qing:"河里鱿鱼否",
              xi:"喜欢吃吃吃",
              pawu:"总有奇迹",
              sugar:"糖好吃吗",
              xing:"woiewkjksdlllfdks",
              dou:"28829",
              la:"39203-3-",
              kong:"290nslkds",
            },
            {
              guang:"有了你才有了我",
              qing:"是的",
              xi:"怕变胖胖",
              pawu:"总有奇迹",
              sugar:"巧克力",
              xing:"流行谁",
              dou:"28829",
              la:"39203-3-",
              kong:"290nslkds",
            }
          ],
        };
      },
    

    method:

    1、根据表头label设表格列宽度

    //根据表头label设表格列宽度
    flexLabelWidth(str){
          let flexWidth = 0 
          for (const char of str) {
            if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
              // 如果是英文字符,为字符分配8个单位宽度
              flexWidth += 8
            } else if (char >= '\u4e00' && char <= '\u9fa5') {
              // 如果是中文字符,为字符分配15个单位宽度
              flexWidth += 20
            } else {
              // 其他种类字符,为字符分配8个单位宽度
              flexWidth += 9
            }
          }
          if (flexWidth < 80) {
            // 设置最小宽度
            flexWidth = 80
          }
          // if (flexWidth > 250) {
          //   // 设置最大宽度
          //   flexWidth = 250
          // }
          return flexWidth + 'px'
    },
    

    2、根据表格列内容里最长的一个设宽度

    // 根据表格列内容里最长的一个设宽度
    flexColumnWidth(str, tableData, flag = 'max') {
          // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);
          // flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max'
          // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
          str = str + ''
          let columnContent = ''
          if (!tableData || !tableData.length || tableData.length === 0 || tableData === undefined) {
            return
          }
          if (!str || !str.length || str.length === 0 || str === undefined) {
            return
          }
          if (flag === 'equal') {
            // 获取该列中第一个不为空的数据(内容)
            for (let i = 0; i < tableData.length; i++) {
              if (tableData[i][str].length > 0) {
                // console.log('该列数据[0]:', tableData[0][str])
                columnContent = tableData[i][str]
                break
              }
            }
          } else {
            // 获取该列中最长的数据(内容)
            let index = 0
            for (let i = 0; i < tableData.length; i++) {
              if (tableData[i][str] === null) {
                return
              }
              const now_temp = tableData[i][str] + ''
              const max_temp = tableData[index][str] + ''
              if (now_temp.length > max_temp.length) {
                index = i
              }
            }
            columnContent = tableData[index][str]
          }
           console.log('该列数据[i]:',columnContent)
    
          // 以下分配的单位长度可根据实际需求进行调整
          let flexWidth = 0
          for (const char of columnContent) {
            if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
              // 如果是英文字符,为字符分配8个单位宽度
              flexWidth += 8
            } else if (char >= '\u4e00' && char <= '\u9fa5') {
              // 如果是中文字符,为字符分配15个单位宽度
              flexWidth += 20
            } else {
              // 其他种类字符,为字符分配8个单位宽度
              flexWidth += 9
            }
          }
          if (flexWidth < 80) {
            // 设置最小宽度
            flexWidth = 80
          }
          // if (flexWidth > 250) {
          //   // 设置最大宽度
          //   flexWidth = 250
          // }
          return flexWidth + 'px'
    },
    

    参考链接:https://www.cnblogs.com/love314159/p/14537897.html

    我是土豆,下次见!
    在这里插入图片描述

    展开全文
  • elementUI的table表格列宽自适应内容宽度

    之前在项目中碰到类似需求

     elementUI的table如果写死列宽的没法达到这个效果,百度说用什么插件的,很多人说会出现一些奇奇怪怪的问题

    但是如果不写列宽,table会平均分配每个列的宽度,如果列名过长也会导致表格很难看,且达不到所想要的效果,后随即通过动态绑定width实现

     1.在页面UI中

                <el-table-column
                  prop="item_name"
                  label="检查项目"
                  :width="getAdaptionWidth('item_name',ExamItemArr)"
                ></el-table-column>

    2.methods中

     

      // table自适应列宽
        getAdaptionWidth(prop,tableData){
          // 接收两个参数 prop为列的属性值  tableData为表格数据源
          prop = prop + ''
          // 判断传递的数据是否可用
          if (!Array.isArray(tableData) || tableData.length === 0 ) {
            return
          }
          if (!prop || !prop.length || prop.length === 0 || prop === undefined || prop === null) {
            return
          } 
            let columnContent = ''
            // 获取该列中最长的数据(内容)
            let index = 0
            for (let i = 0; i < tableData.length; i++) {
              if (tableData[i][prop] === null) {
                return
              }
              const now_text = tableData[i][prop] + ''
              const max_text = tableData[index][prop] + ''
              
              if (now_text.length > max_text.length) {
                index = i
              }
            }
            // 获取到的最长的列的内容
            columnContent = tableData[index][prop] 
            console.log(columnContent,'列宽是多少');
          // // 以下分配的单位长度可根据实际需求进行调整
          let columnWidth = 0
          for (const char of columnContent) {
            if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
              // 如果是英文字符,为字符分配10个单位宽度
              columnWidth += 10
            } else if (char >= '\u4e00' && char <= '\u9fa5') {
              // 如果是中文字符,为字符分配20个单位宽度
              columnWidth += 20
            } else {
              // 其他种类字符,为字符分配10个单位宽度
              columnWidth += 10
            }
          }
          if (columnWidth < 80) {
            // 设置最小宽度
            columnWidth = 80
          }
          if (columnWidth > 260) {
            // 设置最大宽度
            columnWidth = 260
          }
          return columnWidth + 'px'
        },

     我这里最长的字符是这个,每个汉子20像素,、是10像素,所以这个列宽是110像素

    注:如果你的prop是xxx.yyy可能会报错哦!

    都已经给大家注释好啦,直接复制使用即可,欢迎大佬指点!

    展开全文
  • 解决elementui表格操作自适应列宽

    千次阅读 2021-03-07 19:56:59
    写死宽度时是这样的:开始给操作绑定宽度属性:width="actionColWidth < 80 ? 80 : actionColWidth"把操作的所有按钮用一个div套起来class="action-col"...data里设置列宽初始值actionColWi...

    业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作...

    写死宽度时是这样的:

    442e627a01dca9394c7c64835091fbf5.png

    开始

    给操作列绑定宽度属性

    :width="actionColWidth < 80 ? 80 : actionColWidth"

    把操作列的所有按钮用一个div套起来

    class="action-col"

    ...

    data里设置列宽初始值

    actionColWidth: 80, //表格操作列宽度

    在表格数据请求回来赋值给表格之后,执行计算宽度的操作

    这里是用jq获取表格第一行的全部按钮,然后把每个按钮的宽度加起来,就是操作列的宽度。

    不用jq的话用原生js也行。

    如果表格每一行的操作按钮是不一样的,那么就获取每一行操作按钮的总宽度,然后取最大的就行。这里没有这个需求,就不写了。

    getClerkList(params)

    .then((res) => {

    this.tableData = res.rows;

    this.$nextTick(() => {

    // 给表格操作列宽度多出25px,否则显示不完整

    let width = 25;

    // 使用jq遍历表格第一行操作列里的每一个按钮

    $(".action-col")

    .eq(0)

    .children(".el-button")

    .each(function () {

    // 把每个按钮的宽度加起来

    width += $(this).outerWidth(true);

    });

    // 把计算好的总宽度赋值给操作列宽

    this.actionColWidth = width;

    });

    })

    .catch((err) => {

    console.error(err);

    });

    看一下效果

    没有按钮时:

    f12049bfbfdeccd1bcb7eacecb58406c.png

    有一个按钮:

    802c75354e73189d38dc0f8d95e49274.png

    有两个按钮:

    b2b30f22e0001e24fd4a4a13c6ab457b.png

    有三个按钮:

    6a216487cbf05b071ca93671d3549299.png

    到此这篇关于解决elementui表格操作列自适应列宽的文章就介绍到这了,更多相关elementui表格自适应列宽内容请搜索得牛网以前的文章或继续浏览下面的相关文章希望大家以后多多支持得牛网!

    展开全文
  • elementUI表格组件,当表格横向滚动时,每列宽度自适应
  • 自己使用,该附件里的代码已经实现了使用vue 及elementui的table的拖动功能。
  • <el-table-column prop="createTime" label="创建时间" min-width="12.5%" > </el-table-column> ...可以将每个el-table-colum的width设置成min-width,值用百分比可以,各个el-table-column的和为1,...
  • elementui表格中的怎么实现自适应列宽发布时间:2020-12-28 14:58:04来源:亿速云阅读:53作者:Leah这期内容当中小编将会给大家带来有关elementui表格中的怎么实现自适应列宽,文章内容丰富且以专业的角度为...
  • elementUI 表格列宽自适应

    千次阅读 2020-11-12 19:54:33
    API里面没有给出控制列宽随字段变化而变化的方法,我参考了网上各种方法,找到了一种比较简单通用的方法来实现 表格列宽自适应。 实现思路是利用 vue 的watch 属性监控表格的数据,计算每列的内容和表头的最大宽度...
  • el-table设置table-layout='auto canvas动态计算el-table-column宽度 列宽按内容最大宽度,不换行
  • 基于 Element-UI 二次封装的支持自适应列宽的 table-column 组件
  • 表格el-table列宽度被用户压缩后,右侧会出现一块空白 table { width: 100% !important; } 增加样式后,怎么拖拽列宽度表格的整体宽度都是100%了。
  • 【IE11】elementUI table 表格宽度不是100%的问题 在用vue写前端的时候,用到了element-ui中的el-table,在el-table-column数据相对来说少的情况下,谷歌,360等都能将表格宽度自适应为100%,但是ie不能自适应为...
  • elementUI官网有介绍到给表格排序的方法 之所以失效是因为我没在<el-table-column>上加上prop='stime' 原本,如果内容需要<template>来存放,在<el-table-column>上加prop就没有意义,但在...
  • 所有el-table-column都给了固定的width,但从页面上来看,整个table的宽度要大于所有宽度,而右侧的操作给了固定fixed="right"使中间多出来了空白。 比如:一共有5,每一都给了固定宽100px,总和宽为500...
  • ElementUI table表格列动态渲染

    千次阅读 2021-04-28 06:18:15
    现有业务需求,是不固定的。根据api返回的数据,进行动态渲染。 官方table示例,链接如下: https://element.eleme.cn/#/zh-CN/component/table 二、实现 在此基础上,增加tableHeader 变量,用来动态渲染。 test....
  • 本篇文章小编给大家分享一下解决elementui表格操作自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看。写死宽度时是这样的:开始给操作绑定...
  • 在table外层包一层div元素,设置css宽度继承自父级宽度,添加代码:position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码:position:relative; 示例截图: 注意: 如果遇到flex...
  • elementUI表格组件:自定义模板(完整案例) 所谓的自定义模板,你也可以理解为自定义td的格式。 代码块1:
  • element ui的表格列 遍历tableData 与表头,找出该列最长的字符max 创建span标签计算最长字符所占宽度offsetWidth 设置min-width属性(String类型) 在组件渲染前计算出最小宽度,避免表格渲染过程宽度高度不稳定 ...
  • elementui表格内容超出显示省略号,el-table控制属性::show-overflow-tooltip=‘true’ <el-table :data="list" stripe style="width: 100%" :row-style="{ height: '57px', padding: '0' }" :cell-style=...
  • 在项目app.vue文件的style里添加: <style> body .el-table th.gutter{ display:table-cell!important; } </style>

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 899
精华内容 359
关键字:

elementui表格列的宽度