配置详情组件

配置详情组件，根据配置，生成相应的详情页面，可以在配置中写函数，逻辑实现值得变化。基于‘饿了吗全家桶’ 话不多说，直接上代码。
效果图

<template>
    <el-drawer
    class="description-box"
    :title="title"
    :size="size"
    :visible.sync="drawer"
    :direction="direction"
    >
    <el-descriptions border title="" :column="1" v-loading="loading">
        <el-descriptions-item v-for="item in schema" :label="item.label" :key="item.label">
        <span v-if="item.type=='img'">
            <img
                style="width: 100px; height: 100px"
                src="@/assets/images/header.jpg"/>
        </span>
        <p v-else>{{item.value}}</p>
        </el-descriptions-item>
    </el-descriptions>
    <slot name="table"></slot>
    </el-drawer>
</template>
<script>
import request from '@/utils/request' // 数据请求函数，更具url获取详情内容
  export default {
    name: 'description',
    props: {
        title: {
            type: String,
            default: '标题' // 详情名称
        },
        schema: {
          type: Array,
          default: [] // 配置
        },
        size: {
          type: String,
          default: '30%' 
        }
    },
    data() {
      return {
        drawer: false,
        dataForm: {},
        direction: 'rtl',
        loading: false
      };
    },
    methods: {
        init(url) {
        this.loading = true
        this.drawer = true
        this.$nextTick(() => {
            if (url) {
            request({
                url: url,
                method: 'GET',
              }).then(res => {
                this.dataForm = res.data
                this.ininDataFun()
                this.loading = false
              })
            }
        })
        
        
        },
      ininDataFun() {
        this.schema.map((item) => {
          const { render, field} = item;
              const _data = this.dataForm[item.field];
              if (_data == 'undeifind') {
                item.value = ''
              } else {
                const getField = this.dataForm[item.field];
                item.value =  this.isFunction(render) ? render(getField) : getField ? getField:''; // 这里就是处理函数得地方，先判断是否是函数，是就执行，获取值
              }
          })
      },
      isFunction(val) {
        return typeof val === 'function';
      }
    }
  };
</script>
<style lang="scss">
.description-box{
  .el-descriptions{
    padding-left: 20px;
    .el-descriptions--mini,.el-descriptions--small {
      font-size: 14px;
    }
  }
  .is-bordered-label{
        width: 180px;
    }
}

</style>

使用方法
引入组件

import infoBox from '@/components/descriptions/index.vue'

标签

<info-box title="业务部门详情" v-if="infoBoxVisible"  :schema="infoList" ref="infoBox">
     <template #table>
      <!--      下方插入内容，我一直设置table，根据自己的需求改-->
         <p class="com-padding"><span>分配行政部门</span></p>
         <el-table :data="tableData" style="width: 100%">
             <el-table-column prop="date" label="默认" align="center" width="60">
                 <template slot-scope="scope">
                     <span>{{ scope.row.defaultFlag ? '是' : '否' }}</span>
                 </template>
             </el-table-column>
             <el-table-column prop="orgName" label="组织名称" width="180">
             </el-table-column>
             <el-table-column prop="orgPatternName" label="组织形态">
             </el-table-column>
         </el-table>
     </template>
 </info-box>

配置参数

 infoList: [
                {
                    field: 'name', // 值的属性
                    label: '职务名称', //显示标题
                },
                {
                    field: 'lockStatus',
                    label: '数据状态',
                    render: (curVal) => {
                    //函数控制值的变化
                        return curVal ? "已封存" : "未封存";
                    },
                }
            ]

调用

lookInfo(id) {`在这里插入代码片`
            this.infoBoxVisible = true
            this.$nextTick(() => {
                this.$refs.infoBox.init(`/api/permission/sys/position/queryById?id=${id}`)
            })
        }

好了，差不多一个简单的配置详情组件已完成，有时间分享一些东西，希望自己和你们能一起成长