el-descriptions的入门学习

el-descriptions的入门学习

知识点

  1. el-descriptionstitle属性设置标题
  2. el-descriptionsextra属性用于设置操作区域
  3. el-descriptions-itemlabel属性用于设置标签
  4. el-descriptionssize设置整体大小
  5. el-descriptionscolumn设置每行的列数
  6. el-descriptionsborder设置边框样式
  7. el-descriptionsdirection设置label和内容的纵横向显示效果,默认横向
  8. el-descriptions-itemlabel标签设置和el-form-itemlabel标签一致,内容填充方式一致
  9. label-class-name设置labelclass样式,border下背景色设置不生效
  10. content-class-name设置内容的class样式
  11. 标签内容在无边框情况下有冒号,在border情况下无冒号

效果图

el-descriptions的入门学习_第1张图片

代码

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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>

官网

el-descriptions学习官网

你可能感兴趣的:(element-ui,学习,elementui)