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

发布于:2025-02-10 ⋅ 阅读:(39) ⋅ 点赞:(0)

(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>
  


网站公告

今日签到

点亮在社区的每一天
去签到