当前位置: 首页 > article >正文

el-table设置单元格行高间距

(1)定位修改元素

(2)通过deep进行样式修改

<style  lang="scss" scoped>

/*  lang="scss" 用了 scss 使用::v-depp{} 穿透修改样式
   未使用scss   直接用/deep/ {修改样式}
*/  
::v-deep {

    /**el-table表格调整 start*/
    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
        height: auto;
        padding: 2px 0;
    }

    .el-table--mini .el-table__cell {
        padding: 2px;
        flex: 1;
    }

    /**el-table表格调整 end */
}
</style>

// 不使用sass
<style  scoped>
/deep/ .el-table .el-table__header-wrapper th,.el-table .el-table__fixed-header-wrapper th {
        height: auto;
        padding: 2px 0;
    
}

/deep/ .el-table--mini .el-table__cell {
        padding: 2px;
    }

</style>
<template>
    <div class="content">
        <el-table :data="tableData" stripe border style="width: 100%" size="mini">
            <el-table-column label="序号" align="center" width="50" fixed>
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="date" label="日期" align="center" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="address" label="地址" align="center" width="210">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100" align="center">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import A_Input from "@/views/components/common/A_Input.vue"; //输入框
export default {
    name: "TableBase",
    components: {
        A_Input
    },
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    },
    created() { },
    mounted() { },
    methods: {},
};
</script>
  
<style  lang="scss" scoped>
::v-deep {

    /**el-table表格调整 start*/
    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th {
        height: auto;
        padding: 2px 0;
    }

    .el-table--mini .el-table__cell {
        padding: 2px;
    }

    /**el-table表格调整 end */

}
</style>
  


http://www.kler.cn/a/472871.html

相关文章:

  • 记录一次MySQL:caching_sha2_password报错
  • 这是什么操作?强制迁移?GitLab 停止中国区用户访问
  • 【2024华为OD-E卷-100分-boss的收入】(题目+思路+JavaC++Python解析)
  • 【权限管理】Apache Shiro学习教程
  • 联邦学习中的LoRA:FedLoRA
  • PySide6的样式表
  • 从 0 开始上手 Solana 智能合约
  • 网站运营数据pv、uv、ip
  • 200多个高分辨率婚礼旅拍不同环境天空替换素材 Visualsofjulius - Sky Bundle II
  • 基于FPGA的出租车里程时间计费器
  • 欧标开源OCPP充电桩平台 V2.6.8 - 慧知开源充电平台
  • Spark的原理以及使用
  • PyMysql 02|(包含项目实战)数据库工具类封装
  • 结构型模式4.装饰器模式
  • 枫清科技高雪峰: Data-Centric新范式开启,知识引擎+大模型双轮驱动企业智能化
  • Python里JSON orjson ujson在json.loads有什么区别?
  • 性能测试03|JMeter:断言、关联、web脚本录制
  • c++ 17 constexpr
  • conda+jupyter+pycharm:如何在Windows conda环境下运行jupyter并使用浏览器或者pycharm运行.ipynb
  • 开源一款简单易用的键盘音效工具
  • el-table 多级表头
  • 域名反查IP多种方式
  • 【Linux基础指令】第一期
  • 高频 SQL 50 题(基础版)_197. 上升的温度
  • cursor试用出现:Too many free trial accounts used on this machine 的解决方法
  • html 前端进行浮动布局设置