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的描述列表

关键代码如下，也很简单

 
            
                甲乙丙丁戊己庚辛壬癸
                子丑寅卯辰巳午未申酉戌亥
                甲丙戊庚壬
                乙丁己辛癸
                子寅辰午申戌
                丑卯巳未酉亥