element 表格 - 表头太长换行

Posted 2023-04-27

参考技术A

使用element 表格时做数据呈现时，如果遇到表头字段过多过长，我们的解决办法有以下几种

使用 ：

注意 ：全部指定width，如果字段值太少，那么表格无法占满-展示效果查

使用 ：

注意 ：如果指定min-width的列宽没有小于指定值，会占满剩余表格宽度

在使用 render-header 时element会报警告

提示 我这边有试过用这种方法，总是出现各种问题---有待解决

使用 ：

重点 ：使用slot-scope可以实现表格-表头和内容自定义
但是我们依旧无法解决让表头实现不换行全部显示,没有指定宽度的列，依旧等比分配了，里面内容可以设置宽度，但是不起作用。目前没找到好的方法~~~

己
思路：如果我们给表格label值特别长的列设置width，其余列不设置不是可以解决？
一般情况我们的表格都是通过v-for循环实现的

这样我们就需要再表头渲染之前处理，根据label值的长度，如果label值长度大于4我们就设置width属性，其余为 "" 不设置
注意: font-size 并不代表字符的长度，是大小，如果设置font-size：16px;不代表一个字符的宽度就是 16，我把页面中font-size设置为16px；这样一个中文字符的宽度就是24， （这种方式处理依赖于文字的大小，文字大小是响应屏幕大小变化，这种方式不适用）---后面又更好的方法再更新

element表格表头显示斜杠

最近开发碰到项目原型图的表格的表头有一个斜杠展示效果，通过修改element原有的样式也是成功将这个效果做了出来，话不多说，直接上代码。

html

<div>
	<el-table  :data="tableData" border stripe>
                <el-table-column prop="year" label="机械类型" width="150" align="center">
                    <el-table-column prop="year" label="排放参数" align="center" width="150"></el-table-column>
                </el-table-column>
                <el-table-column prop="fenopda" label="挖掘机（千克）" align="center"></el-table-column>
                <el-table-column prop="dwaiod" label="推土机（千克）" align="center"></el-table-column>
                <el-table-column prop="date" label="装载机（千克）" align="center"></el-table-column>
                <el-table-column prop="name" label="叉车（千克）" align="center"></el-table-column>
                <el-table-column prop="province" label="压路机（千克）" align="center"></el-table-column>
                <el-table-column prop="city" label="摊铺机（千克）" align="center"></el-table-column>
                <el-table-column prop="address" label="平地机（千克）" align="center"></el-table-column>
                <el-table-column prop="zip" label="其他（千克）" align="center"></el-table-column>
     </el-table>
</div>

data

data() {
         return {
         	 //模拟的假数据
             tableData: [{
                 date: '2016-05-03',
                 name: '王小虎',
                 province: '上海',
                 city: '普陀区',
                 address: '上海市普陀区金沙江路',
                 zip: 200333,
                 dwaiod:"154",
                 fenopda:"89",
                 year:"12178"
             }]
         }
     },

css

<style scoped>
	::v-deep  .el-table thead.is-group th {
        background: none;
        padding: 0px;
    }

    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
        border-bottom: none;/*中间的横线去掉*/
    }

    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
        text-align: right;/*上边文字靠右*/
    }

    ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
        text-align: left;/*下边文字靠左*/
    }
	/*核心代码*/
    ::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100px;/*斜线的长度*/
        top: 0;
        left: 0;
        background-color: grey;
        opacity: 0.2;
        display: block;
        transform: rotate(-43deg);/*调整斜线的角度*/
        transform: rotate(-70deg);/*调整斜线的角度*/
        -webkit-transform-origin: top;
        transform-origin: top;
    }
	
    ::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100px;/*斜线的长度*/
        bottom: 0;
        right: 0;
        background-color: grey;
        opacity: 0.2;
        display: block;
        transform: rotate(-45deg);/*调整斜线的角度*/
        transform: rotate(-70deg);/*调整斜线的角度*/
        -webkit-transform-origin: bottom;
        transform-origin: bottom;
    }
    ::v-deep .el-table thead.is-group th{
        height: 27.4px;
    }
</style>

展示效果