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>