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;从网上查找修改方式然后修改即可 情况三…

python的面向对象编程

为什么要面向对象编程&#xff1f; 伟大的领袖毛泽东曾说过&#xff1a;编程最大的敌人是重复。 最开始&#xff0c;在程序中写的一条条语句&#xff0c;在执行的时候会变成一条条指令交给CPU执行。这就是**“程序是指令的集合”** 。为了简化程序的设计&#xff0c;引入了函数…

WebPages 全局:深入解析现代网页设计与开发

WebPages 全局:深入解析现代网页设计与开发 引言 随着互联网技术的飞速发展,网页设计与开发已经成为了数字化时代的重要组成部分。从简单的文本和图像展示,到如今复杂的多媒体交互体验,网页设计经历了翻天覆地的变化。本文将深入探讨WebPages全局,包括网页设计的基本概念…

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

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

pytorch GPU cuda 使用 报错 整理

GPU 使用、报错整理 1. 使用指定GPU&#xff08;单卡&#xff09;1.1 方法1&#xff1a;os.environ[CUDA_VISIBLE_DEVICES]1.2 方法2&#xff1a;torch.device(cuda:2)1.3 报错1&#xff1a;RuntimeError: CUDA error: invalid device ordinal CUDA kernel errors might be asy…

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 自定义指令创建自定义指令在模板中使用自定义指令自定义指令的钩子函数自定义指令的实例演示 指令注册局部注册指令过滤器 数据绑定和响应式原理响应式数据绑定…

Oracle逻辑备份

逻辑备份 expdp 备份恢复表空间 创建测试数据 # 创建表空间 create tablespace itpux01 datafile /oradata/fghsdb/itpux01.dbf size 100m autoextend off extent management local autoallocate segment space management auto; create tablespace itpux02 datafile /o…

编程题目积累(day5)

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

OAuth 和 SSO 场景中的 URL 语法解析

OAuth 和 SSO 场景中的 URL 语法解析 在 OAuth 和 SSO (Single Sign-On) 场景中&#xff0c;URL 是一个关键组件&#xff0c;用于在客户端和服务器之间传递认证请求和响应。让我们深入解析这个 URL&#xff1a; https://api.commerce.ondemand.com/occ/oauth/authorize?resp…

【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;和脚本中…

【笔记】记一次读写分离之shardingsphere.datasource导致数据源为空错误

错误&#xff1a; *************************** APPLICATION FAILED TO START *************************** Description: Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be configured. Reason: Failed to determin…

搭建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…

C# Winform 自定义事件实战

在C#的WinForms中&#xff0c;自定义事件是一种强大的工具&#xff0c;它允许你创建自己的事件&#xff0c;从而在特定条件下通知订阅者。自定义事件通常用于封装业务逻辑&#xff0c;使代码更加模块化和易于维护。下面我将通过一个实战例子来展示如何在WinForms中创建和使用自…

多线程编程中的条件变量及其优化

本套课在线学习视频&#xff08;网盘地址&#xff0c;保存到网盘即可免费观看&#xff09;&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/7220b198cf00 在多线程编程中&#xff0c;条件变量是一种用于线程间通信和同步的机制。通过使用条件变量&#xff0c;可以有效地…