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;

效果:

相关推荐
小熊学Java22 分钟前
基于 Spring Boot+Vue 的高校竞赛管理平台
vue.js·spring boot·后端
百思可瑞教育5 小时前
uni-app 根据用户不同身份显示不同的tabBar
vue.js·uni-app·北京百思可瑞教育·北京百思教育
华仔啊8 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
BillKu10 小时前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
IT古董10 小时前
Vue + Vite + Element UI 实现动态主题切换:基于 :root + SCSS 变量的最佳实践
vue.js·ui·scss
乖女子@@@13 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育13 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e14 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
Sapphire~15 小时前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰16 小时前
歌词滚动效果
前端·css