el-descriptions的入门学习
<!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="/element-ui/lib/theme-chalk/">
<script src="/npm/vue/dist/"></script>
<script src="/element-ui/lib/"></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>