vue2 elementui描述列表

先看效果，elementui2.15.7支持el-descriptions，低版本的不支持。我是初学者，这里有几个要点 flex布局、滚动条样式等，

1 mock造数
mock这里使用了正则来造日期和中文的数据

import Mock, { Random } from 'mockjs'
import {getParams} from '@/utils/strUtil'
import {N18GLIST} from '@/utils/constant'
const sampleList = Mock.mock({'rows|100':[{id:'@guid','sex|1':['男','女','未知'],name: /[\u4E00-\u9FA5]{2,7}/,'nation|1':['中国','美国','日本','俄罗斯'],bazi: /([甲乙丙丁戊己庚辛][子丑寅卯辰巳午未申酉戌亥] ){3}[甲乙丙丁戊己庚辛][子丑寅卯辰巳午未申酉戌亥]/,birthday:/19\d{2}年[01]?[1-9]月[1-31]日/,birthplace:/[\u4E00-\u9FA5]{6,15}/,geju:() =>{// 随机选择1~3个let size = Math.ceil(Math.random()*3)let num = Math.floor(Math.random()*N18GLIST.length)return N18GLIST.slice(num, num+size)},'qiangruo|1':['弱','强','从强','从弱'],yongshen:'',tag:'',source:'百度百科'}]
})export default {'get|find/sampleList': option => {// 断语数据let params = getParams(option.url)let tableData = sampleList.rows.slice((params.page-1)*params.rows,params.page*params.rows)return {success: true,data: {total:100,rows:tableData}}}
}

2 滚动条
让滚动条更细一点

::-webkit-scrollbar {padding-left: 2px;width: 5px;height: 5px;background-color: #f5f5f5;
}::-webkit-scrollbar-thumb {border-radius: 5px;background-color: rgb(230, 230, 230);
}::-webkit-scrollbar-track {border-radius: 5px;background-color: #f5f5f5;
}

3 描述列表
通过deep选择器，改变一些原生elementui的样式
通过flex，设置元素一左一右，且局中显示

<template><el-card :body-style="{margin:'10px'}" :id="info.id"style="margin:5px 5px 0px 0px;height:290px;" ><div slot="header" class="header"><span style="">{{info.name}}</span><span style="margin-left:auto;">{{info.sex}}</span></div><div class="content"><el-descriptions :column="1"><el-descriptions-item label="八字">{{info.bazi}}</el-descriptions-item><el-descriptions-item label="出生日期">{{info.birthday}}</el-descriptions-item><el-descriptions-item label="国籍">{{info.nation}}</el-descriptions-item><el-descriptions-item label="出生地">{{info.birthplace}}</el-descriptions-item><el-descriptions-item label="格局"><el-tag size="small" v-for="item in info.geju" :key="item.val" style="margin-right:5px;margin-top:2px;">{{item.name}}</el-tag></el-descriptions-item><el-descriptions-item label="强弱">{{info.qiangruo}}</el-descriptions-item><el-descriptions-item label="用神">{{info.yongshen}}</el-descriptions-item><el-descriptions-item label="标签">{{info.tag}}</el-descriptions-item></el-descriptions></div><el-divider></el-divider><div class="footer"><el-link type="primary">详情</el-link><span style="margin-left:auto;">{{info.source}}</span></div></el-card>
</template><script>
export default {name: "ml-panel",data() {return {}},props: {info: Object},created() {},mounted() {},
}
</script>
<style lang="less" scoped>.el-card /deep/ .el-card__header{height:30px;// background-color: yellowgreen;display: flex;align-items: center;}.el-card /deep/ .el-divider--horizontal{margin: 0px;}.el-card /deep/ .el-descriptions-item__container .el-descriptions-item__content, .el-descriptions-item__container .el-descriptions-item__label {display: -webkit-inline-box;display: -ms-inline-flexbox;/* display: inline-flex; */-webkit-box-align: baseline;-ms-flex-align: baseline;align-items: baseline;}.header{display: flex;justify-content: flex-end;flex:2;}.content{height: 260px;overflow: auto;}.footer{display: flex;justify-content: flex-end;margin-top: 5px;}
</style>

下面做一个类似table的描述列表

关键代码如下，也很简单

 <el-descriptions-item label="天干地支" :span="2" contentStyle="padding:0px;"><el-descriptions :column="2" border size="small" ><el-descriptions-item label="十天干">甲乙丙丁戊己庚辛壬癸</el-descriptions-item><el-descriptions-item label="十二地支" >子丑寅卯辰巳午未申酉戌亥</el-descriptions-item><el-descriptions-item label="阳干">甲丙戊庚壬</el-descriptions-item><el-descriptions-item label="阴干" >乙丁己辛癸</el-descriptions-item><el-descriptions-item label="阳支">子寅辰午申戌</el-descriptions-item><el-descriptions-item label="阴支" >丑卯巳未酉亥</el-descriptions-item></el-descriptions></el-descriptions-item>

vue2 elementui描述列表相关推荐

055_Descriptions描述列表
1. Descriptions描述列表 1.1. 列表形式展示多个字段. 1.2. Descriptions Attributes 参数说明类型可选值默认值 border 是否带有边框 boo ...
基于ruoyi+vue+elementUI实现列表，新增，附件上传，tab+springBoot+mybatis+oracle序列+批量新增
基于ruoyi+vue+elementUI实现列表,新增,附件上传,tab+springBoot+mybatis+oracle序列+批量新增页面效果列表页面新增页面详情页面代码实现列表+新 ...
vue2+element-ui实现表格分页显示
vue2+element-ui实现表格分页显示添加分页el-pagination 实现分页相关方法添加分页el-pagination 编辑FundList.vue,给表格添加分页: <tem ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
9、HTML：有序列表（ol），无序列表（ul），描述列表（dl、dt、dd）详解
1.什么是列表什么是列表? 什么是有序列表? 什么是无序列表? 上面写的 3 句话就是一个列表,你懂得... 2.有序列表有序列表:英文叫做 ordered list,所以标签也是取这个词组的首字 ...
NG-ZORRO Descriptions描述列表自定义title样式（nz-descriptions-item）
如何在NG-ZORRO组件的描述列表中自定义nz-title样式需求描述: 使用NG-ZORRO组件中的Descriptions描述列表显示预约模块基础信息,物流组确认流程节点时,需要可以修改预约时 ...
Vue2+elementUi后台管理项目总结
前言该项目是一款对公司员工及商品管理的后台系统,主要实现功能:公司角色的增删改查,和商品的增删改查,项目的主要模块有,登录,主页,员工管理,权限管理,商品管理,该项目的亮点是权限管理,不同角色登录进 ...
基于Spring boot + Mybatis-plus + ElementUI实现列表CRUD
一.工具版本编写java代码:IdeaIU-2021.1.3 管理项目依赖:Maven-3.8.3 管理项目文件:Git-2.34.1 关系型数据库:Mysql-8.0.27 二.项目搭建 1.创建 ...
vue elementUi邮箱列表选择（全选，已读，未读，删除）功能
基于vue + elementUI写的邮箱列表,包括全选,已读,未读,上次一次点击记录以及删除的操作列表组件如下: <template><div style="heigh ...

vue2 elementui描述列表

vue2 elementui描述列表相关推荐

最新文章

热门文章