element-plus的el-space标签的使用

news2025/1/16 11:01:11

el-space标签可以很方便的设置标签间距和分隔符,对齐方式,是否拆行等属性。

<script setup lang="ts">
import { onMounted, ref } from 'vue';
    
    const size=ref(30)
 
</script>

    
<template>

       <el-space wrap :size="size" spacer="" alignment="flex-end" fill="true">
        <div class="container" v-for="i in 3" :key="i">
            <p v-for="item in 3" class="item" :key="item">
                {{ 'i am'+ item  }}
            </p>
        </div>
       </el-space>
 
        
            
  


</template>

<style scoped>
    .container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }

    .item{
      background-color: lightskyblue;
      margin:10px 10px;
      text-align: center;
      border: 1px solid black;
    }

</style>

size:决定子元素间距大小,默认有三个规格small,default,large,还可设置具体的数值。
wrap:是否拆行,
fill:子元素是否自动填充父容器
在这里插入图片描述
https://element-plus.org/zh-CN/component/space.html

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

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

相关文章

Redis实战宝典:基础知识、实战技巧、应用场景及最佳实践全攻略

背景 在Java系统实现过程中&#xff0c;我们不可避免地会借助大量开源功能组件。然而&#xff0c;这些组件往往功能丰富且体系庞大&#xff0c;官方文档常常详尽至数百页。而在实际项目中&#xff0c;我们可能仅需使用其中的一小部分功能&#xff0c;这就造成了一个挑战&#…

c语言编程

1. 2。 int main(int argc, const char *argv[]) { int year,month,day; int result0; printf("请输入&#xff1a;"); scanf("%d/%d/%d",&year,&month,&day); if(month>12||month<1) { printf("error \n"); return 0; } s…

解决Vue项目Network: unavailable的问题

在vscode使用 npm run serve 运行 Vue项目时发现一个问题&#xff0c;项目只能通过Local访问而不能通过Network访问&#xff0c;终端显示如下&#xff1a; 碰到这种情况的解决方法&#xff1a;在环境变量的path中添加“C:\Windows\System32\Wbem” 1.找到“环境变量”&#xf…

算法题目学习汇总

1、二叉树前中后序遍历:https://blog.csdn.net/cm15835106905/article/details/124699173 2、输入一棵二叉搜索树&#xff0c;将该二叉搜索树转换成一个排序的双向链表。要求不能创建任何新的结点&#xff0c;只能调整树中结点指针的指向。 public class Solution {private Tr…

Leetcode881. 救生艇

Every day a Leetcode 题目来源&#xff1a;881. 救生艇 解法1&#xff1a;贪心 排序 双指针 排序后&#xff0c;使用双指针分别指向数组首尾&#xff0c;每次取两个指针指向的元素之和与 limit 比较&#xff0c;如果小于等于 limit&#xff0c;则两个指针同时向中间移动一…

express入门01服务器搭建以及get和post请求的监听

微搭提供了后端API的能力&#xff0c;但是不同的版本收费差别巨大&#xff0c;因为使用的门槛限制了中小企业使用低代码平台。那可不可以既要又要呢&#xff1f;答案是肯定的&#xff0c;那其实掌握一定的后端框架&#xff0c;借助我们在低代码中已经熟练掌握的技能其实是比较容…

rust asyn和await pin unpin加精!!!

15-探讨为什么Pin在Rust异步编程中如此重要 | Databend_哔哩哔哩_bilibili 能不能Pin住&#xff0c;取决于T是否实现了Unpin&#xff0c;如果实现了Unpin&#xff0c;那么Pin不住 Pin不能pin住u32等基础变量 编译器为async和await生成结构体实现了!Unpin 结构体中使用引用要…

Hexo+Github搭建个人博客教程

hexo官网&#xff1a;https://hexo.io/zh-cn/ butterfly 主题设置&#xff1a;https://butterfly.js.org/ GitHub地址&#xff1a;https://github.com/jerryc127/hexo-theme-butterfly 基础命令 初始化博客命令&#xff1a;hexo init “文件名” 开启本地服务&#xff08;本…

重温共射放大电路

1、放大概念 小功率信号变成一个大功率信号&#xff0c;需要一个核心器件做这件事&#xff0c;核心器件的能量由电源提供&#xff0c;通过核心器件用小功率的信号去控制大电源&#xff0c;来实现能量的转换和控制&#xff0c;前提是不能失真&#xff0c;可以用一系列正弦波进行…

[大模型]GLM-4-9B-Chat WebDemo 部署

环境准备 在autodl平台中租一个4090等24G显存的显卡机器&#xff0c;如下图所示镜像选择PyTorch–>2.1.0–>3.10(ubuntu22.04)–>12.1 接下来打开刚刚租用服务器的JupyterLab&#xff0c; 图像 并且打开其中的终端开始环境配置、模型下载和运行演示。 pip换源和安装…

服务部署:使用docker部署开源Xxl-Job任务调度平台项目

一、项目构建 1、从gitee上下载源码&#xff1a;xxl-job: 一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线&#xff0c;开箱即用。https://gitee.com/xuxueli0323/xxl-job 2、本地使用…

征信受损,别再犯傻!

听说你的征信出了点小问题&#xff1f;别急&#xff0c;这事儿说大不大&#xff0c;但也不能掉以轻心。征信&#xff0c;说白了就是你借钱还钱的记录本&#xff0c;一旦它“花”了&#xff0c;借钱可就没那么轻松了。 先来说说这征信“花”了是咋回事 征信“花”了&#xff0c…

三高系统的架构设计方案:高并发、高可用、高性能

文章目录 一、互联网系统三高概述1、互联网的三高2、高并发3、高可用4、高性能 二、高并发、高性能技术解决方案1、多高的并发才算高并发&#xff1f;2、水平扩展3、负载均衡思想4、缓存思想5、池化复用思想6、异步思想7、预处理-惰性更新思想8、分而治之思想 三、高可用技术解…

监听DB配置变更之go-broadcast简单实现

文章目录 1. 前言2. 分析3. 实现4. 问题5. 小结6. 参考 1. 前言 之前遇到一个需求&#xff0c;因为配置的查找是基于db的&#xff0c;而db的更改却无法实时通知到具体利用到这条数据的使用方&#xff0c;为了实现db数据变动时&#xff0c;能够尽快让使用方知道这条数据发生了变…

echarts组件x轴坐标显示不全解决方法

1.旋转: 修改前: option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun,Mon, Tue, Wed, Thu, Fri, Sat, Sun,Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 1…

802.11漫游流程简单解析与笔记_Part3

原定计划在Part3分析ns3的Roaming流程抓包&#xff0c;但ns3并不支持漫游&#xff1a; 看过Part1的应该都知道&#xff0c;标准关联流程是auth*2 associate*2 key*4&#xff0c;但ns3里面没有与auth有关的部分&#xff0c;third脚本里面有cap字段&#xff0c;但无auth也无key&a…

elementUI el-table高度heght和总结summary 同时使用 表格样式异常

背景 同时使用height和 show-summary 样式错位 解决方案 在钩子函数updated 中重新渲染此表格 <el-table :height"autoHeight" show-summary ref"dataTable" >updated() {this.$nextTick(() >{this.$refs.dataTable.doLayout();})},更改后的效果 …

代码随想录算法训练营第三十三天| 1005.K次取反后最大化的数组和,134. 加油站,135. 分发糖果

1005. K 次取反后最大化的数组和 - 力扣&#xff08;LeetCode&#xff09; class Solution {public int largestSumAfterKNegations(int[] nums, int k) {Arrays.sort(nums);int i 0;while (i < nums.length && nums[i] < 0 && k > 0) {nums[i] num…

Apollo9.0 PNC源码学习之Control模块(二)

前面文章&#xff1a;Apollo9.0 PNC源码学习之Control模块&#xff08;一&#xff09; 本文将对具体控制器以及原理做一个剖析 1 PID控制器 1.1 PID理论基础 如下图所示&#xff0c;PID各参数(Kp,Ki,Kd)的作用&#xff1a; 任何闭环控制系统的首要任务是要稳、准、快的响…

LLM Algorithms(1): Flash Attention

目录 Background Flash Attention Flash Attention Algorithm 参考 NIPS-2022: Flash Attention: Fast and Memory-Efficient Exact Attention with IO-Awareness idea&#xff1a;减少资源消耗&#xff0c;提升或保持模型性能。普通attention的空间复杂度是 --》降低到F…