.list {
.recycle {
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 24px;
}
.item {
display: flex;
align-items: center;
height: 32px;
padding: 0 0 0 4px;
border-bottom: 0;
cursor: pointer;
// 选中样式处理
&-selected {
background-color: #e6f7ff;
color: #1890ff;
.item-icon,
.item-dropdown {
// 继承颜色
color: currentColor;
}
}
&-icon {
font-size: 12px;
margin-right: 6px;
color: #ebedf0;
}
&-title {
flex: 1;
display: block;
// 超过长度省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-dropdown {
cursor: pointer;
// 指定块流动方向
writing-mode: vertical-rl;
color: #ebedf0;
font-weight: bold;
}
}
}
无限的长虚拟列表组件,提高渲染性能,简单的文本及时气泡框架和定制的操作列,以满足个性化需求
我以前已经写了一个列表穿梭框架组件。这次,它实现了具有操作的虚拟列表组件,并结合了滚动加载无限长列表以及虚拟化功能,当数据量大时,可以改善长列表的性能。
蚂蚁设计清单官方网站:https://antdv.com/components/list-cn/
主要实施功能点:
当心:
说明文件
dataSource数据源ArrayActiveKey选择KeyStringOperation操作项目插槽默认操作仅编辑和删除,用户可以自定义处理
提醒:此组件基于开发。如果要使用它,请确保安装系统。我的组件库版本号是
:items="dataList" :item-size="32" key-field="name" > slot-scope="{ item }" :key="item.id" :class="['item', { 'item-selected': activeId === item.id }]" @click="handleSelect(item)" > //工具提示文本提示 >‘‘’ placement="bottomRight" :trigger="['hover']" > Em
.list {
.recycle {
max-height: 320px;
overflow-y: auto;
overflow-x: hidden;
margin-bottom: 24px;
}
.item {
display: flex;
align-items: center;
height: 32px;
padding: 0 0 0 4px;
border-bottom: 0;
cursor: pointer;
// 选中样式处理
&-selected {
background-color: #e6f7ff;
color: #1890ff;
.item-icon,
.item-dropdown {
// 继承颜色
color: currentColor;
}
}
&-icon {
font-size: 12px;
margin-right: 6px;
color: #ebedf0;
}
&-title {
flex: 1;
display: block;
// 超过长度省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&-dropdown {
cursor: pointer;
// 指定块流动方向
writing-mode: vertical-rl;
color: #ebedf0;
font-weight: bold;
}
}
}