vue自定义通用极简表单详情组件

最新推荐文章于 2024-09-01 16:54:55 发布

han_deer

最新推荐文章于 2024-09-01 16:54:55 发布

阅读量1.3k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/han_deer/article/details/125657375

版权

表单详情的样式都一样，懒得写那么多了，就写了个组件

首先上预览效果：

可自行定义样式和功能，本例子为将姓名的值字体变红并且点击跳转到其他页面

新建一个vue页面，在其中写如下代码：

<template>
    <div class="elTableModule">
        <el-form ref="form" :model="formOption.formdata" :label-width="labelWidth!=undefined?labelWidth:'120px'" label-position="right">
            <el-row type="flex" justify="center">
                <el-col :span="20">
                    <el-row>
                        <el-col  :span="20" v-for="(item, index) in formOption.listColumn" :key="'tableHeader' + index">
                            <el-form-item :prop="item.prop" :label="item.label"
                                :width="item.width != undefined ? item.width : ''">
                                    <!-- 判断是否有需特殊处理的字段内容，如果有则使用插槽在具体页面中去处理，插槽名为需处理的字段名 -->
                                    <slot v-if='item.slot' :name="item.prop" :values="formOption.formdata[item.prop]"></slot>
  <span v-else >{{formOption.formdata[item.prop]}}</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-form>

    </div>
</template>

<script>
export default {
    name: '',
    props: {
        labelWidth:undefined,
        formOption: {
            // 表格数据
            data: [],
            // 表头的配置 包括：标题名，标题prop, width等，
            headerColumn: [],
        },
    },
    watch: {

    },
    data() {
        return {
        }
    },
    methods: {

    }
}
</script>

将这个页面在main.js中引用


import formlist from '@/views/common/formlist.vue'
Vue.component('formlist', formlist)

最终引用：

<template>
         <formlist :formOption='formOption' :labelWidth="'180px'">
                    <!-- 在这里写要自定义的字段 slot和prop的字段对应上即可 -->
                    <template slot-scope="props" slot="name">
                        <span style="color:red" @click="goDetail" >{{ props.values }}</span>
                    </template>
        </formlist>
</template>
<script>
export default {
    name: "",
    data() {
        return {
          
            // 选中数组
            formOption: {
                // label:表单标题  prop:对应字段   slot:是否自定义，没有可不写
                listColumn: [
                    { label: "姓名", prop: 'name', slot: true, },
                    { label: "年龄", prop: 'age' },
                    { label: "性别", prop: 'gender' },
                  
                ],
                // 表格数据
                formdata: {
                    name: '迪丽热巴',
                    age: 18,
                    gender:'女'
                },
            }
        };
    },
  
    mounted() {
    },
    watch: {

    },
    methods: {
        // 跳转到详情
        goDetail(id) {
            this.$router.push({ name: 'xxx'});
        },
   
    }
}
</script>

<style lang="scss" scoped>
</style>