ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号

前言

我们知道,在ant design vue当中的table组件里面的列表项目,我们一般会使用columns属性定义列表项目,比如下面

export const columns = [{title:'姓名',dataIndex:'name',slots:{customRender: 'name'},ellipsis: true,align: 'center',},]

其中有一个属性,叫ellipsis这个是设置超出部门是否是省略号的,这个属性很有用,但是如果使用了columns当中的插槽,就会失效,所以这个时候我们必须要手动设置下超出省略显示逗号,但是之前设置的查出省略总是出现这个问题,大概就是这样子,当缩小屏幕的时候,明明可以占据完全,但是依旧显示的是省略号

原来的样式(less书写)和html结构代码,其实后面改进主要是改进css样式,html结构没有改动

.demo {//描述&_table{&_item-wrapper{display: flex;//头像&_avatar{flex-shrink: 0;background-color: red;vertical-align: middle;margin-right: 7px;}&_info{display: flex;flex-direction: column;text-align: left;&>div{max-width: 90px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}}}&_detail{color:#FE9136;margin-left: 10px;cursor:pointer;}}
}<div class="demo_table_item-wrapper"><a-avatar class="demo_table_item-wrapper_avatar" shape="square" size="large">超</a-avatar><!--信息--><div class="demo_table_item-wrapper_info"><div class="demo_table_item-wrapper_info_name"><a-tooltip placement="top"><template #title><span>超人</span></template><span>超人</span></a-tooltip></div><div class="demo_table_item-wrapper_info_other"><a-tooltip placement="top"><template #title><span>冬瓜超人冬瓜超人冬瓜超人</span></template><span>冬瓜超人冬瓜超人冬瓜超人</span></a-tooltip></div></div>
</div>

改造和改造后的代码

主要是设置了max-width
可以看到,后期省略号会随着列表宽度而进行改变,而不是固定死了这个省略号


.demo {
//数据展示
&_table{
&_item-wrapper{display: flex;//关键部分width: 100%;//头像&_avatar{flex-shrink: 0;background-color: red;vertical-align: middle;margin-right: 7px;}&_info{display: flex;flex-flow: column nowrap;text-align: left;//关键部分width: calc(100% - 40px);//减去头像的宽度,有头像就减去,没有就设为100%&>div{&>span{display: inline-block;//关键部分,不可以设置width,要设置max-widthmax-width: 95%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}}}
}
&_detail{color:#FE9136;margin-left: 10px;cursor:pointer;
}
}
}<div class="demo_table_item-wrapper"><a-avatar class="demo_table_item-wrapper_avatar" shape="square" size="large" >{{record?.userName?.slice(0,1)}}</a-avatar><!--信息--><div class="demo_table_item-wrapper_info"><div class="demo_table_item-wrapper_info_name"><a-tooltip placement="top"><template #title><span>{{ record?.userName }}</span></template><span>{{ record?.userName }}</span></a-tooltip></div><div class="demo_table_item-wrapper_info_other"><a-tooltip placement="top"><template #title><span>@{{ record?.corpName }}</span></template><span>@{{ record?.corpName }}</span></a-tooltip></div></div>
</div>

ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号相关推荐

【ant design vue】生成表格序号
1.作用域插槽 columns:[{title: '编号',scopedSlots: { customRender: 'indexRender' },align:'center'}], 2.表格中 & ...
vue + ant design vue 搭配 less 动态自定义主题颜色
今天搞了一下午,终于搞成功了
Ant Design Vue 文件上传自定义按钮和文件列表位置
采用默认上传文件样式如下: 主要代码如下,可参照官方示例 <a-uploadname="file"style="float: left;"@change= ...
Vue3 + Ant Design Vue 可搜索自定义字段 a-tree
记录一下,使用 Ant Design Vue a-tree 需要实现可搜索且后台返回数据不是标准数据的问题目录可搜索自定义字段完整全部代码可搜索自定义字段实现自定义字段需要使用 Tree ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...

ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号

前言

改造和改造后的代码

ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号相关推荐

最新文章

热门文章

ant design vue 当中的表格自定义结构超出隐藏的自适应 动态显示省略号

前言

改造和改造后的代码

ant design vue 当中的表格自定义结构超出隐藏的自适应 动态显示省略号相关推荐

最新文章

热门文章

ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号

ant design vue 当中的表格自定义结构超出隐藏的自适应动态显示省略号相关推荐