首页 > 其他分享 >ant design vue描述列表设置列宽

ant design vue描述列表设置列宽

时间:2023-07-19 10:57:26浏览次数:36  
标签:vue label ant design descriptions 设置 列宽 列表

这是默认的样子,没有数据时会显得label特别宽

设置列宽为200px后如图所示

方式如下

自定义style

.label .ant-descriptions-item-label{
  width: 200px;
}

给descriptions应用样式

<a-descriptions id="jbxx" class="label" title="基本信息" bordered>
          <a-descriptions-item label="事项说明" :span="3"></a-descriptions-item>
          <a-descriptions-item label="事项类型"></a-descriptions-item>
          <a-descriptions-item label="事项编码"></a-descriptions-item>

如果要设置内容列表宽度

同理加上

.label .ant-descriptions-item-content{
  width: 350px;
}

标签:vue,label,ant,design,descriptions,设置,列宽,列表
From: https://www.cnblogs.com/boyolan/p/17564960.html

相关文章

  • vue3,ts,vite4,uniapp设置路径别名
    安装依赖npminstall--save-dev@types/node配置vite.config.ts文件//vite.config.tsimport{defineConfig}from'vite';import{resolve}from'path';exportdefaultdefineConfig({resolve:{alias:{'/@/':resolve(......
  • vue-element-admin改为从后台拿动态路由
    改为从后台拿动态路由,大概如下步骤:1、后台增加接口,返回动态路由数据2、前端增加请求动态路由接口请求3、修改src/route/index.js去掉原有的动态路由,增加组件名和组件对象映射map4、修改src/store/modules/permission.js修改当前权限判断处理方法 generateRoutes一、后......
  • [未解决] vue transform-blocks解析源代码报错:Illegal tag name. Use '<' to print '<
    报错内容:[vite]Internalservererror:Illegaltagname.Use'<'toprint'<'.用的是这篇博文的源代码展示方法:如何用vite的vueCustomBlockTransforms(自定义块转换)实现源代码展示使用时突然遇到某一个vue文件添加<demo></demo>标签后报错,但其他vue文件可以正常读取和展示......
  • 54.使用VUE3+VITE+TYPESCRIPT+element-plus的setup语法糖,实现导出excel功能
    要实现导出Excel功能,你可以使用以下步骤:1.安装相关依赖:```bashnpminstallxlsxfile-saver```2.在你的组件中引入相关依赖:```javascriptimport{ref}from'vue';import{saveAs}from'file-saver';import{useTable}from'element-plus';importXLSX......
  • vue-pdf组件打印文字全是空白框
    参考:https://www.yii666.com/blog/34226.htmlgithub地址:https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7#diff-537fb76c67921bef8ccf535dad221c0c875ae6d1077a6b16f055440d32b5421f ......
  • vue-day28--对组件的理解
    学了vue之后,我们需要了解组件是什么组件的定义:实现应用中局部功能代码(css/js/html)和资源(map,map,zip)的集合 1.1模块与组件、模块化与组件化1.1.1模块理解:向外提供特定功能的 js 程序,一般就是一个 js 文件为什么:js 文件很多很复杂作用:复用 js,简化 js 的编写,提......
  • vue基本操作[上] 续更----让世界感知你的存在
    Vue引用js文件的多种方式1.vue-cliwebpack全局引入jquery(1)首先npminstalljquery--save(--save的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。)(2)在webpack.base.conf.js里加入"""varwebpack=require("webpack")"""(3)在module.......
  • vue实现文本复制
    一.下载插件npminstall--savevue-clipboard2二.main.jsimportVueClipBoardfrom'vue-clipboard2'Vue.use(VueClipBoard)三.使用html部分点击查看代码<el-buttonsize="mini"type="text"icon=&q......
  • vue3+vite4实现动态引入图片
    本来是想使用vue2时使用的require,但是在运行时却突然报错:看到上面的报错让我很懵,require为啥不能使用呢??经过我不懈的努力,终于找到原因:在Vue3和Vite4中,不再推荐使用CommonJS的require语法,而是使用ECMAScript模块(ESM)的import语法。Vite4默认支持ESM,因此在使用......
  • vue - 图片的放大镜功能
    //html<divclass="productLeft"><!--左侧中图--><divclass="mdImg"><img:src="qall"alt=""></div><!--遮罩层--><divv-show="isShow"class=&qu......