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

问题:

在这里插入图片描述
代码片段:

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

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

效果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/44667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows安全日志导致环境内存占用过高

Windows 环境内存占用高不释放&#xff0c;目前遇到的常见情况如下&#xff1a; 情况一&#xff1a;JVM内存泄漏 这种网上的排查方式有很多&#xff0c;自行查阅即可 情况二&#xff1a;SQLserver内存配置过大 这种也是&#xff0c;从网上查找修改方式然后修改即可 情况三…

Defensor 4.5:构建数据资产为中心的安全运营体系

5月31日“向星力”未来数据技术峰会上&#xff0c;星环科技重磅发布数据安全管理平台 Defensor 4.5版本。新版本引入了以数据资产为中心的数据安全运营体系&#xff0c;通过智能化大模型技术&#xff0c;帮助企业快速、精准地识别核心重要资产&#xff1b;建设全局的数据安全策…

MySQL学习记录 —— 십팔 常用程序和配置文件

文章目录 1、mysqld2、mysql常用命令介绍 3、配置文件语法 1、mysqld mysqld就是MySQL服务器&#xff0c;是一个多线程程序。对数据目录&#xff0c;即mysql的主要工作目录进行访问管理。当mysqld启动时&#xff0c;会侦听指定的端口&#xff0c;处理来自客户端程序的网络连接…

【vue教程】二. Vue特性原理详解

目录 回顾本章涵盖知识点Vue 实例和选项创建 Vue 实例Vue 实例的选项 Vue 模板语法插值表达式指令v-bindv-modelv-on 自定义指令创建自定义指令在模板中使用自定义指令自定义指令的钩子函数自定义指令的实例演示 指令注册局部注册指令过滤器 数据绑定和响应式原理响应式数据绑定…

编程题目积累(day5)

题目&#xff1a; 源数组a&#xff0c;将a中所有元素乘以2之后添加进a&#xff0c;则这个a就叫双倍数组&#xff0c;给你一个数组a&#xff0c;判断它是不是双倍数组&#xff0c;如果是则输出源数组&#xff0c;不是则输出空数组。 补充知识&#xff1a; python中枚举和字典…

【python数据结构精讲】双端队列

通过总结《流畅的Python》等书中的知识&#xff0c;总结Python中常用工具的方法。 deque&#xff0c;学名双端队列。 1. 常用方法 append()&#xff1a;队列尾部添加appendleft()&#xff1a;队首添加pop()&#xff1a;移除队列最后一个元素popleft()&#xff1a;移除队列第一…

AI算法14-套索回归算法Lasso Regression | LR

套索回归算法概述 套索回归算法简介 在统计学和机器学习中&#xff0c;套索回归是一种同时进行特征选择和正则化&#xff08;数学&#xff09;的回归分析方法&#xff0c;旨在增强统计模型的预测准确性和可解释性&#xff0c; 正则化是一种回归的形式&#xff0c;它将系数估…

并发编程-06之Semaphore

一 Semaphore入门 1.1 什么是Semaphore Semaphore&#xff0c;俗称信号量&#xff0c;它是操作系统中PV操作的原语在java的实现&#xff0c;它也是基于AbstractQueuedSynchronizer实现的。 Semaphore的功能非常强大&#xff0c;大小为1的信号量就类似于互斥锁&#xff0c;通过同…

centos部署jar包

第一步&#xff1a; 将IDEA中的项目打包为jar,将这个jar文件放到centos服务器上的目录里&#xff0c;我在opt新建api目录&#xff0c;将jar文件放入&#xff0c;如下图&#xff1a; 第二步&#xff1a; 将需要读取的配置文件也放入此目录(其他目录也可以&#xff0c;和脚本中…

搭建RAG系统就这么简单:LangChain|RAG是什么?

RAG是什么 “RAG”&#xff08;Retrieval-Augmented Generation&#xff09;是一种结合了检索&#xff08;Retrieval&#xff09;和生成&#xff08;Generation&#xff09;的人工智能技术&#xff0c;它在大模型中被需要的原因包括&#xff1a; 知识丰富性&#xff1a; 大模…

探索数据结构与算法的奇妙世界 —— Github开源项目推荐《Hello 算法》

在浩瀚的编程与计算机科学领域中&#xff0c;数据结构与算法无疑是每位开发者攀登技术高峰的必经之路。然而&#xff0c;对于初学者而言&#xff0c;这条路往往布满了荆棘与挑战。幸运的是&#xff0c;今天我要向大家推荐一个令人振奋的项目——《Hello Algo》&#xff0c;它正…

ubuntu使用kubeadm搭建k8s集群

一、卸载k8s kubeadm reset -f modprobe -r ipip lsmod rm -rf ~/.kube/# 自己选择性删除 坑点哦 rm -rf /etc/kubernetes/ rm -rf /etc/systemd/system/kubelet.service.d rm -rf /etc/systemd/system/kubelet.service rm -rf /usr/bin/kube* rm -rf /etc/cni rm -rf /opt/cn…

Prometheus + alermanager + webhook-dingtalk 告警

添加钉钉机器人 1. 部署 alermanager 1.1 下载软件包 wget https://github.com/prometheus/alertmanager/releases/download/v0.26.0/alertmanager-0.26.0.linux-amd64.tar.gz 网址 &#xff1a;Releases prometheus/alertmanager (github.com) 1.2 解压软件包 mkdir -pv …

医日健集团技术力量体现测试的背后

医日健集团覆盖式更新 科技日新月异的时代&#xff0c;医日健集团始终走在行业的前列。近日&#xff0c;医日健集团外勤技术人员全面对市场点位投放的数智药房进行了新系统升级和机器测试&#xff0c;这是医日健对于科技创新的最新尝试。 以客户体验为核心优化新体验 医日健集团…

Js 前置,后置补零的原生方法与补字符串 padStart及padEnd

在工作中&#xff0c;遇到了需要将不满八位的一个字符串进行后补0的操作&#xff0c;所以就在网上学习了关于js原生补充字符串的方法&#xff0c;然后用这篇博客记录下来。 目录 前置补充字符串 String.prototype.padStart() 后置补充字符串String.prototype.padEnd() 前置补…

【超音速 专利 CN117710683A】基于分类模型的轻量级工业图像关键点检测方法

申请号CN202311601629.7公开号&#xff08;公开&#xff09;CN117710683A申请日2023.11.27申请人&#xff08;公开&#xff09;超音速人工智能科技股份有限公司发明人&#xff08;公开&#xff09;张俊峰(总); 杨培文(总); 沈俊羽; 张小村 技术领域 本发明涉及图像关键点检测…

数据库MySQL下载安装

MySQL下载安装地址如下&#xff1a; MySQL :: Download MySQL Community Server 1、下载界面 2、点击下载 3、解压记住目录 4、配置my.ini文件 未完..

Vue.js学习笔记(五)抽奖组件封装——转盘抽奖

基于VUE2转盘组件的开发 文章目录 基于VUE2转盘组件的开发前言一、开发步骤1.组件布局2.布局样式3.数据准备 二、最后效果总结 前言 因为之前的转盘功能是图片做的&#xff0c;每次活动更新都要重做UI和前端&#xff0c;为了解决这一问题进行动态配置转盘组件开发&#xff0c;…

STM32智能仓储管理系统教程

目录 引言环境准备晶智能仓储管理系统基础代码实现&#xff1a;实现智能仓储管理系统 4.1 数据采集模块 4.2 数据处理与决策模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;仓储管理与优化问题解决方案与优化收尾与总结 1. 引言 智能仓储管理系统…

7 月12日学习打卡--栈和队列的相互转换

hello大家好呀&#xff0c;本博客目的在于记录暑假学习打卡&#xff0c;后续会整理成一个专栏&#xff0c;主要打算在暑假学习完数据结构&#xff0c;因此会发一些相关的数据结构实现的博客和一些刷的题&#xff0c;个人学习使用&#xff0c;也希望大家多多支持&#xff0c;有不…