el-descriptions的入门学习

自律最差的编程狗

已于 2022-06-22 09:57:24 修改

阅读量2.7w

点赞数 9

分类专栏： element-ui 文章标签：学习 elementui

于 2022-06-17 16:35:00 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/125335602

版权

element-ui 专栏收录该内容

43 篇文章 20 订阅

订阅专栏

el-descriptions的入门学习

知识点

el-descriptions的title属性设置标题
el-descriptions的extra属性用于设置操作区域
el-descriptions-item的label属性用于设置标签
el-descriptions的size设置整体大小
el-descriptions的column设置每行的列数
el-descriptions的border设置边框样式
el-descriptions的direction设置label和内容的纵横向显示效果，默认横向
el-descriptions-item的label标签设置和el-form-item的label标签一致，内容填充方式一致
label-class-name设置label的class样式，border下背景色设置不生效
content-class-name设置内容的class样式
标签内容在无边框情况下有冒号，在border情况下无冒号

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body>
    <div id='app'>
        <el-radio-group v-model='size'>
            <el-radio label=''>默认</el-radio>
            <el-radio label='medium'>中等</el-radio>
            <el-radio label='small'>小型</el-radio>
            <el-radio label='mini'>超小</el-radio>
        </el-radio-group>
        <el-descriptions title='个人简介' direction='vertical' :size='size' :column="2" :border='true'>
            <template slot='extra'>
                <el-button type='primary' size='small'>操作</el-button>
            </template>
            <el-descriptions-item label='姓名' label-class-name="my-label" content-class-name="my-content">
                司马懿
            </el-descriptions-item>
            <el-descriptions-item label='手机号'>
                13855117374
            </el-descriptions-item>
            <el-descriptions-item label='居住地'>
                洛阳
            </el-descriptions-item>
            <el-descriptions-item label='学校'>
                <el-tag>
                    安徽科技学院
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label='联系地址'>
                江苏省苏州市吴中区吴中大道1188号
            </el-descriptions-item>
        </el-descriptions>
    </div>
</body>

</html>
<style>
    .my-label {
      background: #0AFFFF;
    }
  
    .my-content {
      background: #FDE2E2;
    }
  </style>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                size:'',
            }
        },
        methods: {

        }
    })
</script>