VUE注册自定义抽屉组件（前后端分离）

最新推荐文章于 2024-08-19 16:53:32 发布

123end

最新推荐文章于 2024-08-19 16:53:32 发布

阅读量336

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43408993/article/details/116258719

版权

这篇博客展示了如何在Vue中使用组件和事件处理。通过点击表格单元格触发`getOldCustomerDetails`方法，显示`LookDrawer`组件，展示老客户收入明细。组件内通过`init`方法从API获取数据并更新表格内容。

摘要由CSDN通过智能技术生成

引用组件的页面.vue

<!-- 动态为某一单元格设置点击事件 ——>
<el-table-column>
<template slot-scope="scope">
<el-button type="text" size="small" @click="getOldCustomerDetails(scope.row)" v-if="scope.row.accountClassify == '老客户收入'">{{towNumber(scope.row.budgetTarget)}}</el-button>
<span v-else>{{towNumber(scope.row.budgetTarget)}}</span>
</template>
</el-table-column>
<!-- 组件弹窗 ——>
<div>
      <look-drawer v-if = "oldCustomerDetailVisible" ref="oldCustomerDetail" />
 </div>
<script>
import LookDrawer from "../mbudgetview/look-drawer.vue";//引入组件
export default {
  components: { LookDrawer },//注册组件

  data(){
      return{
          oldCustomerDetailVisible:false,//组件是否可见
          query:{
                 inchargeBy:'',
                 inchargeByDept:'',
                },//查询参数
    }
      methods:{
             //老客户详情
               getOldCustomerDetails(row){
                this.oldCustomerDetailVisible = true;
               //员工的ID
               this.query.inchargeBy = this.employeeCode
               this.$nextTick(() => {
                    this.$refs.oldCustomerDetail.init(this.query)
                           })
                    },
      }
}
}
</script>

组件.vue

<template>
    <el-drawer title="老客户收入明细"
               :visible.sync="oldCustomerDetailVisible"
               size="40%"
               style="margin-left: 10px;"
    >
    <el-table :data="dataList" border stripe>
         <el-table-column
              type="index"
              header-align="center"
              align="center"
              label="序号">
        </el-table-column>
        <el-table-column 
            prop="customerName"
            header-align="center"
            align="center"
            label="客户名称">
        </el-table-column>
        <el-table-column
        prop="productName"
            header-align="center"
            align="center"
            label="产品名称">
        </el-table-column>
        <el-table-column
        prop="inchargeBy"
            header-align="center"
            align="center"
            label="负责人工号">
        </el-table-column>
        <el-table-column
        prop="employeeName"
            header-align="center"
            align="center"
            label="负责人">
        </el-table-column>
        <el-table-column
        prop="amount"
        header-align="center"
        align="center"
        label="金额">
        </el-table-column>
        
    </el-table>
    </el-drawer>
</template>
<script>
import { getOldCustomerDetails } from '@/api/budget/mbudgetoldcustomerdetail'
export default {
    data(){
        return{
            dataList:[],
            oldCustomerDetailVisible:false,
            query:{
                 inchargeBy:'',
                 inchargeByDept:'',
            },
        }
    },
    methods:{
        init(paramList){
            // this.param.inchargeBy = paramList.employeeCode;
            this.query = paramList;
            getOldCustomerDetails(this.query).then(response=>{
                console.log("vvvvvvvv")
                console.log(response.data.data)
                this.dataList = response.data.data;
                console.log(this.dataList)
                this.oldCustomerDetailVisible = true
            })
        }
    }
}
</script>

查询数据的方法.js

import request from '@/router/axios'

export function getOldCustomerDetails(query) {
    return request({
      url: '/budget/moldcustomerdetail/detail',//后台查找
      method: 'get',
      params: query
    })
  }