组件复用记录

供应商子组件

<template>
    <div>
        <!-- 供应商组件复用 -->
        <el-dialog title="供应商" :visible.sync="supplierDialogVisible" width="65%" @close="supplierDialogClosed">
            <el-row :gutter="20">
                <el-input placeholder="请输入供应商名称" style="margin-left:10px" v-model="queryInfoT.name" class="inputgys" @input="searchT"></el-input>
            </el-row>
            <el-table ref="singleTable" :data="supplierList" highlight-current-row @current-change="supplierclickSelected" @cell-dblclick="supplierdobClickSelected" style="width: 100%;margin-top:10px" height="500">
                <!-- <el-table-column type="index" width="50"></el-table-column> -->
                <el-table-column property="rankId" label="货商编号"></el-table-column>
                <el-table-column property="name" label="货商名称"></el-table-column>
                <el-table-column property="linkMan" label="联系人"></el-table-column>
                <el-table-column property="mobile" label="联系手机"></el-table-column>
            </el-table>
            <el-pagination background @size-change="handleSizeChangeT" @current-change="handleCurrentChangeT" :current-page="queryInfoT.pageNum" :page-sizes="[1, 5, 10, 15]" :page-size="queryInfoT.pageSize" layout="total, sizes, prev, pager, next,jumper" :total="totalT"></el-pagination>
        </el-dialog>
        <el-input v-model="gprovider" disabled @click.native="addSearchSupplier" class="rt-input"></el-input>
    </div>
</template>

<script>
export default {
    data() {
        return {
            supplierSelectVal: [],
            searchMerchantList: [],
            gprovider: '',
            gproviderman: '',
            provideid: '',
            plinkmanid: '',
            dealerId: '',
            supplierList: [],
            supplierDialogVisible: false,
            /* 供应商页面*/
            queryInfoT: {
                pageNum: 1,
                pageSize: 10
            },
            totalT: 0
        };
    },

    methods: {
        //搜索供应商
        addSearchSupplier() {
            this.getSeller(); // 搜索供应商表单
            this.supplierDialogVisible = true;
        },
        // 搜索供应商事件
        searchT(val) {
            console.log(val);
            this.getSeller();
        },
        //供应商搜索
        handleSizeChangeT(newSize) {
            console.log(newSize);
            this.queryInfoT.pageSize = newSize;
            this.getSeller();
        },
        handleCurrentChangeT(current) {
            console.log(current);
            this.queryInfoT.pageNum = current;
            this.getSeller();
        },
        // 获取供应商信息
        async getSeller() {
            const res = await this.$http.get('sysetingms/customerInfo/supplierPage', { params: this.queryInfoT });
            if (res.status !== 200) return this.$message.error('获取用户列表失败');
            console.log(res.data.data);

            this.totalT = res.data.data.total;
            this.supplierList = res.data.data.list;
            this.searchMerchantList = res.data.data.list;
            // this.totalW = res.data.data.total;
        },
        // 点击供应商单元格
        supplierclickSelected(val) {
            this.supplierSelectVal = val;
        },
        // 双击供应商单元格
        supplierdobClickSelected() {
            this.getvalue(this.supplierSelectVal);
   
            this.supplierDialogVisible = false;
        },
        // 供应商关闭事件
        supplierDialogClosed() {
            this.queryInfoT.name = '';
            this.queryInfoT.pageSize = 10;
            this.queryInfoT.pageNum = 1;
            console.log(this.queryInfoT);
      
        },

        getvalue(val) {
            //子组件通过$emit给父组件传值
            this.$emit('getvalue', val);
        }
    },

    //生命周期 - 创建完成（访问当前this实例）
    created() {}
};
</script>

<style lang='less' scoped>
.inputgys {
    width: 97%;
}
.rt-input /deep/ .el-input__inner {
    width: 180px;
    // color: rgb(92, 112, 234) !important;
    cursor: pointer;
}
</style>

父组件调用

//导入
import Gprovider from '../common/gprovider';


 // 注册子组件
    components: {
        Gprovider
    }


//使用
 <Gprovider @getvalue="getgprovider($event)"></Gprovider>


//获取子组件的值
 getgprovider(val) {
            console.log(val);
            this.supplierSelectVal = val;
            console.log(this.supplierSelectVal);
        },
``