el-table某列的列宽自适应，其他列按比例分配。

情景一：例如首列按照内容自适应展开，其余列有各自的比例。
注意点：

给需要自适应展开的列加 :width="flexColumnWidth"计算方法 就可以自适应展开

需要给余下所有的列都设置 width=“auto” min-width=“10%” 比例 比例可以不一样

余下的列会按照自己比例和其他列比例进行对比 然后分配余下的宽度

如果不给余下列设置比例 那么余下所有列会自动适应相同比例超出列表宽度会有滚动条

情景二：这是不设置比例的余下列会平分宽度

以下代码可以直接复制使用：
这是给余下列设置了比例的代码

<template><div style="width:1000px;"><el-table border :data="tableData" fit style="width: 100%"><!-- :width="flexColumnWidth('string',tableData)" --><el-table-column label="文字" :width="flexColumnWidth('string',tableData)"><template slot-scope="scope"><el-input v-model="scope.row.string"></el-input></template></el-table-column><el-table-column prop="name" label="姓名" width="auto" min-width="20%"></el-table-column><el-table-column prop="a" label="a" width="auto" min-width="10%"></el-table-column><el-table-column prop="b" label="b" width="auto" min-width="10%"></el-table-column><el-table-column prop="c" label="c" width="auto" min-width="10%"></el-table-column><el-table-column prop="d" label="d" width="auto" min-width="10%"></el-table-column><el-table-column prop="e" label="e" width="auto" min-width="5%"></el-table-column><el-table-column prop="f" label="f" width="auto" min-width="5%"></el-table-column><el-table-column prop="address" label="地址" width="auto" min-width="20%"></el-table-column></el-table></div>
</template><script>export default {data () {return {tableData: [{string: '20%', name: '20%', a: '10%', b: '10%', c: '10%', d: '10%', e: '5%', f: '5%', address: '20%'},{string: '一二三四五六七八九十', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1517 弄'},{string: '条件他又长又短的的女分的看到偶尔偶尔饿哦偶尔分佛开口分配佛分富婆看哦考配哦', name: '王小虎', a: '111111', b: '211', c: '111', d: '1', e: 11, f: '122', address: '上海市普陀区金沙江路 1519 弄'},{string: '条件他又长又看到配佛分富婆看哦考配哦', name: '王小虎', a: '12', b: '211', c: '111', d: '1', e: 11, f: '122', address: '123456789'}]}},methods: {// 自适应表格列宽flexColumnWidth (str, arr1, flag = 'max') {console.log(str)// str为该列的字段名(传字符串);tableData为该表格的数据源(传变量);// flag为可选值，可不传该参数,传参时可选'max'或'equal',默认为'max'// flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。str = str + ''let columnContent = ''if (!arr1 || !arr1.length || arr1.length === 0 || arr1 === undefined) {return '80px' // 给个默认的}if (!str || !str.length || str.length === 0 || str === undefined) {return '80px' // 给个默认的}if (flag === 'equal') {// 获取该列中第一个不为空的数据(内容)for (let i = 0; i < arr1.length; i++) {if (arr1[i][str].length > 0) {// console.log('该列数据[0]:', arr1[0][str])columnContent = arr1[i][str]break}}} else {// 获取该列中最长的数据(内容)let index = 0for (let i = 0; i < arr1.length; i++) {if (arr1[i][str] === null) {return}const now_temp = arr1[i][str] + ''const max_temp = arr1[index][str] + ''if (now_temp.length > max_temp.length) {index = i}}columnContent = arr1[index][str]}// console.log('该列数据[i]:', columnContent)// 以下分配的单位长度可根据实际需求进行调整let flexWidth = 0for (const char of columnContent) {if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {// 如果是英文字符，为字符分配8个单位宽度flexWidth += 8} else if (char >= '\u4e00' && char <= '\u9fa5') {// 如果是中文字符，为字符分配15个单位宽度flexWidth += 15} else {// 其他种类字符，为字符分配8个单位宽度flexWidth += 8}}if (flexWidth < 80) {// 设置最小宽度flexWidth = 80}// if (flexWidth > 250) {//   // 设置最大宽度//   flexWidth = 250// }// 可以再多留部分的paddingflexWidth += 30return flexWidth + 'px'}}
}
</script>

el-table某列的列宽自适应，其他列按比例分配。相关推荐

html div如何列对其,CSS:自适应N列布局如何解决两端对齐
关于每行N列的这种布局,存在一个两端对齐的问题,因为每一列都会存在一个margin-left或者margin-right,导致最后一个超出父元素的边界. 通过一番努力,终于解决了这个遗留很久的问题,废 ...
bootstraptable列宽自适应内容_多列列表框行高和列宽的自适应调整
LabVIEW:2015 在使用多列列表框(Multicolumn Listbox)时,有时不同列显示的内容长度不一致,为了显示更加美观,并节省界面显示空间,需要实现多列列表框的行高和列宽的自适应调整 ...
el-table列宽自适应；el-table表格的列根据内容自动撑满；el-table内容换行问题；
原文链接重点就一个方法 :width="flexColumnWidth('date',tableData)" 第一个参数是这个列的字段第二个参数是这个表格的数据只需要给对应的 ...
Hutool工具类ExcelWriter导出excel列宽自适应问题解决
前言: 因为项目中需要使用到ExcelWriter导出excel的列宽自适应,下面为解决该问题的经过,希望可以对遇到同样问题的开发者有所帮助. 一.通过查询Hutool官方的api文档发现autoSi ...
antd 表格列宽自适应方法以及错误处理
当不给某列设置宽度时这一列的宽度等于: (表格宽度-有宽度列的宽度)/没有固定宽度的列的数量也就是没有设置宽度的列会平分表格中余下的宽度在antd 的表格中, 当你不设置表格滚动, 并且你给每一列 ...
R语言data.table导入数据实战:data.table生成新的数据列（基于已有数据列）、生成多个数据列
R语言data.table导入数据实战:data.table生成新的数据列(基于已有数据列).生成多个数据列目录 R语言data.table导入数据实战:data.
R语言data.table导入数据实战:data.table使用字符向量创建新的数据列
R语言data.table导入数据实战:data.table使用字符向量创建新的数据列目录 R语言data.table导入数据实战:data.table使用字符向量创建新的数据列
table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrolltable.addeventlistener( 'scroll',(event) => ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...

el-table某列的列宽自适应，其他列按比例分配。

el-table某列的列宽自适应，其他列按比例分配。相关推荐

最新文章

热门文章