element基础详情页-文本描述组件_element ui详情页

欢迎点击领取 -《前端开发面试题进阶秘籍》：前端登顶之巅-最全面的前端知识点梳理总结

*专享

最新版本element-ui 已支持详情描述组件，直接使用即可。

前言

对于常做topB系统的小伙伴们，基础信息详情页是最常见不过的。

使用

只是做了简易版，相关参数并不支持render的写法；有兴趣的可以写写，支持render后扩展性会更好

import DescriptionList from "./Description.vue"; // 引入组件

<DescriptionList title="退款申请" col="6" :content="data"> // col element-ui栅格栏布局同官网使用
  <Description term="取货单号">1000000000</Description> // 组件内使用固定标签
  <Description term="状态">已取货</Description>
  <Description term="销售单号">1234123421</Description>
  <Description term="子订单">3214321432</Description>
</DescriptionList>
1
2
3
4
5
6
7
8

组件

/** 
* 文本详情描述组件
*/
<template>
  <div class="description_text">
    <div v-if="title" class="title">{{title}}</div>
    <el-row :gutter="gutter">
      <el-col :key="key" :span="+col" v-for="(item, key) in dataSource">
        <div class="term">{{item.term}}</div>
        <div class="detail">{{item.detail}}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const handleArrayObj = data => {
  return data
    .filter(item => item.tag === "Description")
    .map(item => ({
      tag: item.tag,
      term: (item.data && item.data.attrs.term) || "暂无",
      detail: (item.children && item.children[0].text) || "暂无"
    }));
};

export default {
  name: "Description",
  props: {
  	title: String,
  	content: [Object, Array],
    gutter: {
      type: [Number, String],
      default: 20
    },
    col: {
      type: [Number, String],
      default: 8
    }
  },

  data() {
    return {
      dataSource: handleArrayObj(this.$slots.default || [])
    };
  },
  watch: {
  	content() {
  		this.dataSource = handleArrayObj(this.$slots.default || []) 
  	} // 监听重渲染
};
</script>

<style lang="less" scoped>
.description_text {
  .title {
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: rgba(0, 0, 0, 0.85);
  }
  .term {
    color: rgba(0,0,0,.85);
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    padding-bottom: 16px;
    margin-right: 8px;
    white-space: nowrap;
    display: table-cell;
    &:after {
      content: ":";
      margin: 0 8px 0 2px;
      position: relative;
      top: -0.5px;
    }
  }
  .detail {
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
    padding-bottom: 16px;
    color: rgba(0, 0, 0, 0.65);
    display: table-cell;
  }
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88