flexColumnWidth (str, arr1, flag = 'max') { // str为该列的字段名(传字符串);tableData为该表格的数据源(传变量); // flag为可选值,可不传该参数,传参时可选'max'或'equal',默认为'max' // flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度。
const widthList = cells.map((el) => { return el.querySelector(".cell")?.scrollWidth || 0; }); const max = Math.max(...widthList); const padding = 32; table.querySelectorAll(`col[name=${clsName}]`).forEach((el) => { el.setAttribute("width", max + padding); }); });...
1. 设置el-table表头超长隐藏 首先,我们需要为el-table-column设置固定的宽度,并通过CSS样式来隐藏超出部分的内容。这可以通过在表头渲染函数中使用style属性来实现。 2. 为超长隐藏的表头添加el-tooltip提示 在表头渲染函数中,我们可以使用el-tooltip组件来包裹表头内容,这样当内容超出时,用户可以通过悬停来查看完整的...
<el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` 在上面的例子中,表格的宽度将自动填充父容器的剩余空间。 3.使用百分比宽度 如果希望表格的宽度以百分比的形式设置,可以使用el-table-column的min-width和max-width属性,结合CSS样式来实现。例如: ```html <el-table ...
* @param {*} tableData tableData 表格数据源(变量) * @param {*} flag 'max'或'equal',默认为'max' * @param {*} flag flag为'max'则设置列宽适配该列中最长的内容,flag为'equal'则设置列宽适配该列中第一行内容的长度 * @return {*}*/functionflexColumnWidth(prop, label, tableData, flag =...
<el-table :max-height="maxHeight" :key="reload" :data="serverData" v-loading="loading" style="width: 100%" > <el-table-column type="index" label="序号" min-width="100" key="Math.random()" align="center" ></el-table-column> ...
给el-table-column中添加 :show-overflow-tooltip="true" 然后设置样式代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .el-tooltip__popper{ max-width:40%; padding-bottom: 5px!important; display: -webkit-box; // overflow: hidden; ...
但是我记得社区有人开发过 max-width 相关的 plugin 但是我找不到了。 如果简单要实现的话,可以写一个动态计算属性,按照内容宽度给 el-table-item 设置width 属性。比如说: <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column...
Math.max(...[...newSet(arr)]):0returnsum}constPADDING=56// 注意这个PADDING不是固定的,根据项目的情况,调整到一个最合适的值// 调整操作列的宽度functionadjustColumnWidth(currPage=1){if(currPage===1){hash={}}constheaderTable=document.querySelector('.specificalTable .el-table__header-wrapper...
设置列的宽度,例如:<el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="age" label="年龄" width="80"></el-table-column> </el-table>。这将使“姓名”列的宽度为100px,“年龄”列的宽度为80px。如果表格总宽度...