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>
官网
el-descriptions学习官网