手动封装ElementUI描述列表组件el-description

element组件特别多。里面有一个描述组件很好用,但最近需要封装一个组件，使用的是iview，所以就想着自己封装一个el-description。

实现思路：

1. 使用父子组件嵌套实现，父组件为 el-description , 子组件为 el-description-item 。

2. el-description-item 要保证默认显示 label 和 value ，而且还可以使用 slot 来定制内容

3. 利用 vue 的 $slot.content是否存在来实现子组件的内容定制，不存在则显示默认 value，存在则表示是定制内容

4. 利用 el-row 和 el-col 来实现栅格布局

父组件：

 1 <template>
 2   <div class="descriptions">
 3     <div v-if="Boolean(title)" class="descriptions-title">{{ title }}</div>
 4     <div class="descriptions-view">
 5       <el-row class="descriptions-row">
 6         <slot v-if="$slots.default" />
 7         <div v-else style="text-align: center; color: grey;">暂无数据</div>
 8       </el-row>
 9     </div>
10   </div>
11 </template>
12 
13 <script>
14 export default {
15   name: 'ElDescription',
16   props: {
17     title: {
18       type: String,
19       required: false,
20       default: ''
21     }
22   }
23 }
24 </script>
25 
26 <style scoped lang="scss">
27   .descriptions{
28     .descriptions-title{
29       margin-bottom: 20px;
30       color: rgba(0,0,0,.85);
31       font-weight: 700;
32       font-size: 16px;
33       line-height: 1.5;
34     }
35     .descriptions-view{
36       width: 100%;
37       overflow: hidden;
38       table{
39         width: 100%;
40         table-layout: fixed;
41         border-collapse: collapse;
42       }
43       .descriptions-row{
44 
45       }
46     }
47 
48   }
49 
50 </style>

子组件el-description-item

 1 <template>
 2   <el-col
 3     :span="span"
 4     :xs="spanMap.xs"
 5     :sm="spanMap.sm"
 6     :md="spanMap.md"
 7     :lg="spanMap.lg"
 8     :xl="spanMap.xl"
 9     class="descriptions-item"
10   >
11     <div class="descriptions-item-content">
12       <div class="descriptions-item-label">{{ label }}：</div>
13       <div class="descriptions-item-value">
14         <slot v-if="$slots.content" name="content" />
15         <div v-else class="default-value" :title="value">{{ value }}</div>
16       </div>
17     </div>
18   </el-col>
19 </template>
20 
21 <script>
22 export default {
23   name: 'ElDescriptionItem',
24   props: {
25     spanMap: {
26       type: Object,
27       required: false,
28       default: () => { return { } }
29     },
30     span: {
31       type: Number,
32       required: false,
33       default: 6
34     },
35     label: {
36       required: true
37     },
38     value: {
39       required: false,
40       default() {
41         return ''
42       }
43     }
44   }
45 
46 }
47 </script>
48 
49 <style scoped lang="scss">
50   .descriptions-item {
51     padding-bottom: 16px;
52     padding-right: 20px;
53     span {
54       display: inline-block;
55     }
56     .descriptions-item-content {
57       display: flex;
58       justify-content: flex-start;
59       align-items: center;
60       color: rgba(0,0,0,.65);
61       font-size: 14px;
62       line-height: 1.5;
63       width: 100%;
64       .descriptions-item-label{
65         flex-grow: 0;
66         flex-shrink: 0;
67         color: rgba(0,0,0,.85);
68         font-weight: 400;
69         font-size: 14px;
70         line-height: 1.5;
71       }
72       .descriptions-item-value{
73         flex-grow: 1;
74         overflow: hidden;
75         .default-value{
76           overflow: hidden;
77           text-overflow: ellipsis;
78           white-space: nowrap;
79         }
80       }
81     }
82   }
83 </style>

组件使用：

 1 <template>
 2   <div id="descritions">
 3     <!-- 可以使用span 和 span-map对象来控制栅格的大小 -->
 4     <el-description title="测试数据">
 5       <el-description-item label="标题1" value="我是内容1" :span-map="{xl:8}" />
 6       <el-description-item label="标题2" value="我是内容2" :span="6" />
 7       <el-description-item label="标题3" value="超长文本省略号显示，超长文本省略号显示，超长文本省略号显示，超长文本省略号显示，超长文本省略号显示，" />
 8       <el-description-item label="标题4" value="我是内容4" :span="8" :span-map="{md:12}" />
 9       <el-description-item label="标题5" value="我是内容5" />
10       <el-description-item label="标题6" value="我是内容6" />
11       <el-description-item label="标题7" value="我是内容7" />
12       <el-description-item label="标题8" value="我是内容8" />
13       <el-description-item label="定制">
14         <!--  使用名称为conent的slot来定制-->
15         <template slot="content">
16           <div style="color: red;">
17             我是定制内容
18           </div>
19         </template>
20       </el-description-item>
21     </el-description>
22   </div>
23 </template>
24 <script>
25 // 引入组件
26 import ElDescription from './el-description.vue'
27 import ElDescriptionItem from './el-description-item.vue'
28 export default {
29   name: "",
30   components: { ElDescription, ElDescriptionItem },
31   data() {
32     return {
33 
34     };
35   }
36 }
37 </script>
38 <style lang="scss" scoped>
39 #descritions{
40     background-color: #fff;
41 }
42 </style>

效果如图：

标签：el,description,ElementUI,default,item,descriptions,组件
来源： https://www.cnblogs.com/yuwenjing0727/p/16480859.html