vue中table内容和lable对不齐解决方案

问题:

代码片段:

bash 复制代码
<template>
    <el-table :data="tableData" stripe style="width: 100%">

        <el-table-column prop="title" label="标题" width="80px" />
        <el-table-column prop="name" label="内容" width="80px" />
        <el-table-column prop="address" label="发布人" width="80px" />
        <el-table-column prop="date" label="发布时间" width="100px" />

        <el-table-column label="操作" width="200px">
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

解决问题:

1.添加 <el-table-column/>

bash 复制代码
<template>
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column />
        <el-table-column prop="title" label="标题" width="80px" />
        <el-table-column prop="name" label="内容" width="80px" />
        <el-table-column prop="address" label="发布人" width="80px" />
        <el-table-column prop="date" label="发布时间" width="100px" />

        <el-table-column label="操作" width="200px">
            <template #default="scope">
                <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

效果:

2.给table添加:display: table-cell;

效果:

相关推荐
猩兵哥哥1 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
华仔啊1 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
在云端易逍遥2 小时前
前端必学的 CSS Grid 布局体系
前端·css
EMT2 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
进阶的鱼3 小时前
(4种场景)单行、多行文本超出省略号隐藏
前端·css·面试
鹏多多3 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
石金龙18 小时前
[译] Composition in CSS
前端·css
天天扭码19 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531719 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css