el-descriptions的入门学习
·
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>
官网
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
9
0- 0
已为社区贡献6条内容
所有评论(0)