vue自定义组件

最新推荐文章于 2024-05-10 12:27:58 发布

cs95T6

最新推荐文章于 2024-05-10 12:27:58 发布

阅读量1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/cs95T6/article/details/124018788

版权

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit,让父组件监听到自定义事件

今天遇到一个下拉树形结构的单选的需求：
封装的子组件qwOrgCurrentUser
1.在需要用封装组件的地方 import compents <qwOrgCurrentUser … 3步操作

 import qwOrgCurrentUser from "@/pages/Interwork/components/qwOrgCurrentUser";

   components: {
     qwOrgCurrentUser
   }

 <qwOrgCurrentUser :org-codes="orgCodes" @handleReturnarr="handleReturnarr"/>

这里可以看到：org-codes 用来向子组件传参数，子组件用props接收参数。用 this.$emit(“handleReturnarr”, node.orgName, node.orgCode); 子调用父组件方法顺带传参数
全部的代码：封装的组件 qwOrgCurrentUser.vue

<template>
    <div class="select">
        <el-select
            :value="orgCodes"
            filterable
            :filter-method="handlefilterable"
            style="width: 100%"
            :disabled="disabled || !isAdd"
            @click.native="handleClick"
        >
            <el-option :value="orgCodes" :label="orgCodes">
                <el-tree
                    ref="tree"
                    :data="options"
                    node-key="orgName"
                    :filter-node-method="filterNode"
                    :props="props"
                    @node-click="handleNodeClick"
                >
                    <span slot-scope="{ node }" class="custom-tree-node">
                        <span>{{ node.label }}</span>
                    </span>
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
import { childrenOrgList } from "@/pages/Interwork/api/IwDoctor";
export default {
    props: {
        orgCodes: {
            type: String,
            default: () => String,
        },
        disabled: {
            type: Boolean,
            default: false
        },
        isAdd: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            props: {
                multiple: true,
                label: "orgName",
                value: "orgCode",
                children: "children",
            },
            options: [],
        };
    },
    created() {
      childrenOrgList().then((res) => {
            // 机构列表接口
            if (res.status === 200) {
                this.options = res.data.data;
            }
        });
    },
    methods: {
        getOrgName(data, orgCode) {
            let res = "";
            data.forEach((item) => {
                if (item.orgCode === orgCode) {
                    res = item.orgName;
                } else if (item.children) {
                    res = this.getOrgName(item.children);
                }
            });
            return res;
        },
        handlefilterable(val) {
            this.$refs.tree.filter(val);
        },
        filterNode(val, data) {
            if (!val) return true;
            return data.orgName.indexOf(val) !== -1;
        },
        handleNodeClick(node) {
            const length = document.querySelectorAll(".el-select-dropdown").length;
            document.querySelectorAll(".el-select-dropdown")[length-1].style.display = "none";

            this.$emit("handleReturnarr", node.orgName, node.orgCode);
        },
        handleClick() {
            const length = document.querySelectorAll(".el-select-dropdown").length;
            document.querySelectorAll(".el-select-dropdown")[length-1].style.display = "block";
        }
    },
};
</script>

<style lang="scss" scoped>
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: 200px;
    overflow: auto;
    max-height: 274px;
    padding: 0;
    text-align: center;
    background-color: #fff;
}
p {
    margin: 0;
}
.el-form >>> .el-form-item__label {
    min-width: 70px;
}
.formcodes {
    position: relative;
}
.andtree {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    border: 1px solid #eaeaea;
}
</style>

父组件 addDep.vue

<template>
    <div>
        <div id="allmap" />
        <el-form
            ref="depForm"
            :model="depForm"
            :rules="rules"
            label-width="100px"
        >
            <el-row :gutter="30">
                <el-col :span="24">
                    <el-form-item label="机构" prop="id.orgCode">
                        <qwOrgCurrentUser
                            :org-codes="orgCodes"
                            @handleReturnarr="handleReturnarr"
                        />
                    </el-form-item>
                    <el-form-item label="科室名称" prop="depName">
                        <el-input
                            v-model="depForm.depName"
                            placeholder="请输入科室名称"
                        />
                    </el-form-item>
                    <el-form-item label="科室编码" prop="id.depCode">
                        <el-input
                            v-model="depForm.id.depCode"
                            placeholder="请输入科室编码"
                            @blur="validCode"
                        />
                    </el-form-item>
                    <el-form-item label="状态" prop="depStatus">
                        <el-radio-group v-model="depForm.depStatus">
                            <el-radio
                                v-for="(item,index) in stateArr"
                                :key="index"
                                :label="item.value"
                            >
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="24" style="text-align: center">
                    <el-button type="primary" @click="confirm">确定</el-button>
                    <el-button @click="cancelAdd">取消</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import qwOrgCurrentUser from "@/pages/Interwork/components/qwOrgCurrentUser";
import { addDepInfo } from "@/pages/Interwork/api/IwData";
export default {
    props: {
        isAdd: {
            type: Boolean,
            default: true,
        },
        ControlStateArr: {
            type: Array,
            default: () => {}
        }
    },
    components: {
      qwOrgCurrentUser
    },
    data() {
        return {
            depForm: {
                orgName: "", // 机构名称
                depName: "", // 科室名称
                depStatus: "", // 状态
                id:{
                  orgCode:"",
                  depCode:"",
                  upFlag:"1",
                  sucFlag:"1"
                }

            },
            orgCodes: "", // 查询科室单选框
            target: "", // 编辑回显，新增参数传递
            row: "", // 编辑回显，新增参数传递
            rules: {
                "id.orgCode": [
                    {
                        required: true,
                        message: "请选择机构",
                        trigger: "change",
                    },
                ],
                depName: [
                    {
                        required: true,
                        message: "请输入科室名称",
                        trigger: "blur",
                    },
                ],
                depCode: [{ required: true, message: "请输入科室编码" }],
            },
            stateArr: []
        };
    },
    created() {
        this.stateArr = [];
        this.ControlStateArr.forEach(res => {
            let a = {};
            if (res.label != "全部") {
                a.value = res.value;
                a.label = res.label;
                this.stateArr.push(a);
            }
        })
    },
    methods: {
        infoEcho(row) {
            this.depForm.depStatus = "0";
            if (!this.isAdd) {
                this.depForm.id.orgCode = row.orgCode;
                this.orgCodes = row.orgName;
                this.depForm.depName = row.depName;
                this.depForm.id.depCode = row.depCode;
                this.depForm.depStatus = row.depStatus;
            }
        },
        cancelAdd() {
            this.$refs.depForm.resetFields();
            this.$emit("cancelAdd");
        },
        resetForm() {
            // 清空表单
            if (this.isAdd) {
                this.$refs.depForm.resetFields();
            } else {
                this.infoEcho(this.target);
            }
        },
        tip(type, text) {
            // 操作提示
            this.$message({
                type: type,
                message: text,
                offset: 100,
            });
        },
        handleReturnarr(arrname, arrcode) {
            this.orgCodes = arrname;
            this.depForm.id.orgCode=arrcode
            this.depForm.orgName=arrname;
        },
        validCode() {
            // 校验机构代码是否可用
            // const code = {
            //     depCode: this.depForm.depCode,
            // };
            // searchdepCode(code).then((data) => {
            //     if (data.status === 200) {
            //         if (data.data.data === "存在重复机构号") {
            //             this.depForm.depCode = "";
            //             this.tip("error", "存在重复机构号");
            //         } else {
            //             this.tip("success", "机构号可用");
            //         }
            //     }
            // });
        },
        confirm() {
            // 校验
            this.$refs.depForm.validate((valid) => {
                if (valid) {
                    this.registerdeps();
                } else {
                    return false;
                }
            });
        },
        registerdeps() {
            // 新增编辑接口
            const postdata = this.depForm;
            addDepInfo(postdata).then((data) => {
                if (data.status === 200) {
                    this.tip("success", data.data.data);
                    this.$emit("saveSuccess");
                }
            });
        }
    },
};
</script>

<style lang='scss' scoped>
.formmargin {
    * {
        margin-bottom: 10px;
    }
}
</style>