slot
关于slot,使用方法很多
但是最近使用slot的时候发现了一个问题:无法直接双向绑定
- 父组件可以直接展示子组件的变量,但是无法双向数据绑定,于是放弃了slot传参
- 解决方案 使用prop方法,也可以使用this.$parents
先看看需求:
选择物料弹框为子组件,自带搜索功能,子组件多个调用位置
产品组搜索框为后期加入的需求
// 原先代码
// 父组件
<!-- 点添加,弹出物料列表 -->
<material-list v-if="dialogVisible3"
:dialog-visible3="dialogVisible3"
:prod-type="prodType"
:params-obj="paramsObj"
@fetchSelectList="fetchSelectList">
</material-list>
// 子组件并没有slot,没有产品组搜索条件框
<el-form label-width="30%">
<el-row :gutter="24">
<el-col :span="6">
<!-- 物料号 -->
<el-form-item :label="$t('order.Material')" prop="materialCode">
<el-input v-model="searchObj.materialCode" clearable :placeholder="$t('PleaseEnter')" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('Search') }}</el-button>
<el-button icon="el-icon-delete" @click="onReset">{{ $t('Reset') }}</el-button>
</el-col>
</el-row>
</el-form>
// 解决方法
// 方法一父组件
<material-list v-if="dialogVisible3" :dialog-visible3="dialogVisible3" :prod-type="prodType" :params-obj="paramsObj" @fetchSelectList="fetchSelectList">
<!-- 增加物料搜索条件 -->
<template slot="queryParam">
<el-form-item :label="$t('contract.ProductGroup')" prop="prodType">
<el-select v-model="prodType" style="width: 100%" :placeholder="$t('PleaseSelect')" clearable filterable>
<el-option v-for="item in ProductGroupList" :key="item.value" :value="item.value" :label="item.labelEn" />
</el-select>
</el-form-item>
</template>
</material-list>
<script>
export default {
data(){
return {
ProductGroupList: [],
prodType: '',
}
}
}
</script>
// 子组件
<el-form label-width="30%">
<el-row :gutter="24">
<el-col :span="6">
<!-- 物料号 -->
<el-form-item :label="$t('order.Material')" prop="materialCode">
<el-input v-model="searchObj.materialCode" clearable :placeholder="$t('PleaseEnter')" />
</el-form-item>
</el-col>
<!-- 增加父组件的搜索条件slot -->
<el-col :span="6">
<slot name="queryParam" />
</el-col>
<el-col :span="12">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('Search') }}</el-button>
<el-button icon="el-icon-delete" @click="onReset">{{ $t('Reset') }}</el-button>
</el-col>
</el-row>
</el-form>
<script>
export default {
data(){
return {
materialList: [],
searchObj: {
materialCode: '',
},
}
},
methods:{
}
}
</script>
分割
// 问题来了,怎么才能拿到父组件中的参数,slot是父组件创建,参数也是父组件的,子组件怎么才能拿到?
// 通过this.$parent.$parent.prodType去访问
// obj是请求的参数
this.$parent.$parent.prodType ? obj.prodType = this.$parent.$parent.prodType : obj.prodType = ''
api.selectListByDateOrType({ obj }).then(res =>{
})
// 解决办法二:
总体解决思路就是父组件定义一个变量,然后通过prop传给子组件,查询的时候给obj 赋值,同时,有一个清空方法,在父组件定义,点击子组件的时候给触发定义在父组件的方法(this.prodType = '')
// 父组件代码
// 增加 :prod-type="prodType" 绑定@onpReset="onpReset"
<material-list v-if="dialogVisible3" :dialog-visible3="dialogVisible3" :prod-type="prodType" :params-obj="paramsObj" @fetchSelectList="fetchSelectList" @onpReset="onpReset">
<template slot="queryParam">
<el-form-item :label="$t('order.Material')" prop="materialCode">
<el-input v-model="prodType" clearable :placeholder="$t('PleaseEnter')" />
</el-form-item>
</template>
</material-list>
data(){
return:{
prodType: ''
}
},
methods:{
onpReset() {
this.prodType = ''
}
}
// 子组件代码
<template>
<div>
<!-- SelectMaterial - 选择物料 -->
<el-dialog :title="$t('order.SelectMaterial')" :visible.sync="dialogVisible3" :show-close="false" :destroy-on-close="true" width="70%">
<el-form label-width="30%">
<el-row :gutter="24">
<el-col :span="6">
<!-- 物料号 -->
<el-form-item :label="$t('order.Material')" prop="materialCode">
<el-input v-model="searchObj.materialCode" clearable :placeholder="$t('PleaseEnter')" />
</el-form-item>
</el-col>
<el-col :span="6">
<slot name="queryParam" />
</el-col>
<el-col :span="12">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">{{ $t('Search') }}</el-button>
<el-button icon="el-icon-delete" @click="onReset">{{ $t('Reset') }}</el-button>
</el-col>
</el-row>
</el-form>
<el-table :data="materialList" border style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="40" style="text-align: center" />
<el-table-column :label="$t('NumberIndex')" :index="indexMethod" width="60" type="index" align="center" />
<!-- 行项目号 -->
<el-table-column
v-if="!paramsObj.bjType"
prop="contractLineCode"
:label="$t('orderThailand.RowNumber')"
show-overflow-tooltip
align="center"
/>
<el-table-column v-if="paramsObj.bjType" prop="rowId" label="价格ID" show-overflow-tooltip align="center" />
<!-- 产品大类 -->
<el-table-column
v-if="!paramsObj.bjType"
prop="contractProdTcode"
:label="$t('order.ProductCategory')"
show-overflow-tooltip
align="center"
/>
<el-table-column v-if="paramsObj.bjType" prop="contractProdTName" :label="$t('order.ProductCategory')" show-overflow-tooltip align="center" />
<!-- 海尔型号 -->
<el-table-column v-if="!paramsObj.bjType" prop="contractHaierModel" :label="$t('order.HaierModel')" show-overflow-tooltip align="center" />
<!-- 客户型号 -->
<el-table-column v-if="!paramsObj.bjType" prop="customerModel" :label="$t('order.CustomerModel')" show-overflow-tooltip align="center" />
<!-- 特技单号 -->
<el-table-column v-if="!paramsObj.bjType" prop="affirmCode" :label="$t('orderThailand.STRCNo')" show-overflow-tooltip align="center" />
<!-- 物料号 -->
<el-table-column prop="materialCode" :label="$t('order.Material')" show-overflow-tooltip align="center" />
<!-- 物料描述 -->
<el-table-column
v-if="paramsObj.bjType"
prop="pricingUnit"
:label="$t('orderThailand.MaterialDescrition')"
show-overflow-tooltip
align="center"
/>
<!-- 目的港 -->
<el-table-column v-if="!paramsObj.bjType" prop="destinationPort" :label="$t('order.DestPort')" show-overflow-tooltip align="center" />
<!-- 数量 -->
<el-table-column v-if="!paramsObj.bjType" prop="qty" :label="$t('order.OrderQuantity')" show-overflow-tooltip align="center" />
<!-- 销售价格 -->
<el-table-column
v-if="!paramsObj.bjType"
prop="sellingPrice"
:label="$t('orderThailand.SellingPrice')"
show-overflow-tooltip
align="center"
/>
<!-- 订单价格 -->
<el-table-column v-if="!paramsObj.bjType" prop="orderPrice" :label="$t('orderThailand.OrderPrice')" show-overflow-tooltip align="center" />
<!-- 报关价格 -->
<el-table-column v-if="!paramsObj.bjType" prop="orderPrice" :label="$t('orderThailand.DeclarationPrice')" show-overflow-tooltip align="center" />
<!-- 保费 -->
<el-table-column v-if="!paramsObj.bjType" prop="insurance" :label="$t('orderThailand.InsuranceFee')" show-overflow-tooltip align="center" />
<!-- 银行费用 -->
<el-table-column
v-if="!paramsObj.bjType"
prop="bankInterest"
:label="$t('orderThailand.BankInterest')"
show-overflow-tooltip
align="center"
/>
<!-- 总毛重 -->
<el-table-column
v-if="!paramsObj.bjType"
prop="grossWeight"
:label="$t('orderThailand.TotalGrossWeight')"
show-overflow-tooltip
align="center"
/>
<!-- 总净重 -->
<el-table-column v-if="!paramsObj.bjType" prop="netWeight" :label="$t('orderThailand.TotalNetWeight')" show-overflow-tooltip align="center" />
<!-- 总体积 -->
<el-table-column v-if="!paramsObj.bjType" prop="grossValue" :label="$t('orderThailand.TotalVolume')" show-overflow-tooltip align="center" />
<!-- 单位 -->
<el-table-column v-if="!paramsObj.bjType" prop="primaryUom" :label="$t('orderThailand.Unit')" show-overflow-tooltip align="center" />
<!-- 品牌 -->
<el-table-column v-if="!paramsObj.bjType" prop="brandName" :label="$t('orderThailand.Brand')" show-overflow-tooltip align="center" />
<!-- 备件物料单位 -->
<el-table-column v-if="paramsObj.bjType" prop="pricingUnit" :label="$t('orderThailand.Unit')" show-overflow-tooltip align="center" />
<!-- 单价 -->
<el-table-column v-if="paramsObj.bjType" prop="price" :label="$t('orderThailand.UnitPrice')" show-overflow-tooltip align="center" />
<el-table-column
v-if="paramsObj.bjType"
prop="distributionChannel"
label="distribution Channel"
show-overflow-tooltip
align="center"
width="160"
/>
<el-table-column v-if="paramsObj.bjType" prop="startDate" :label="$t('orderThailand.effectiveStartTime')" show-overflow-tooltip align="center" width="160" />
<el-table-column v-if="paramsObj.bjType" prop="endDate" :label="$t('orderThailand.effectiveEndTime')" show-overflow-tooltip align="center" width="160" />
</el-table>
<div class="pagination" style="background: #fff; width: 100%; text-align: right; padding: 20px 0">
<el-pagination
:current-page="modalPage.current"
:page-size="modalPage.size"
background
layout="total, sizes, prev, pager, next,jumper"
:total="modalPage.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogMaterialListClose">{{ $t('Cancel') }}</el-button>
<el-button type="primary" @click="handleAdd">{{ $t('determine') }}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import * as api from '../orderCreate/api'
// import { getStore } from '@/util/store'
// import { dateFormat } from '@/util/date.js'
export default {
props: ['dialogVisible3', 'paramsObj','prodType'],
data() {
return {
materialList: [],
searchObj: {
materialCode: '',
prodType: '',
},
modalPage: {
current: 1,
size: 10,
total: 0,
},
toAddObj: [],
multipleSelections: [], //批量选择
}
},
mounted() {
this.fetchModalData()
},
methods: {
// 物料单弹框关闭
dialogMaterialListClose() {
this.$emit('fetchSelectList', false, [])
this.materialList = []
},
// 合同物料添加
handleAdd() {
this.$emit('fetchSelectList', false, this.multipleSelections)
},
/** 批量选择 **/
handleSelectionChange(val) {
this.multipleSelections = val
},
// index序号
indexMethod(index) {
return (this.modalPage.current - 1) * this.modalPage.size + index + 1
},
// 选择当前物料拿详情
selectModalList(row) {
this.dialogVisible = false
},
handleQuery() {
this.modalPage.current = 1
this.fetchModalData()
},
// 分页
handleSizeChange(val) {
this.modalPage.size = val
this.modalPage.current = 1
this.fetchModalData()
},
handleCurrentChange(val) {
this.modalPage.current = val
this.fetchModalData()
},
onReset() {
this.$emit('onpReset')
this.searchObj = {}
this.modalPage.current = 1
this.fetchModalData('reset')
},
fetchModalData(reset) {
var url = ''
var obj = {
size: this.modalPage.size,
current: this.modalPage.current,
}
if (this.paramsObj?.piCode?.length) {
obj.piCode = this.paramsObj.piCode
url = 'getPiMaterialExtendsPrice'
} else if (this.paramsObj?.contractCode?.length && !this.paramsObj.bjType) {
obj.contractCode = this.paramsObj.contractCode
url = 'getMaterialExtendsPrice'
} else {
// 备件物料接口
url = 'getBjMaterialExtendsPrice'
}
if (this.searchObj.materialCode) obj.materialCode = this.searchObj.materialCode
if (this.prodType && !reset) obj.prodType = this.prodType
if (reset) delete obj.prodType
api[url]({ ...obj })
.then(res => {
if (obj.piCode || this.paramsObj.bjType) {
if (res.code === 0) {
this.materialList = res.data.records
this.modalPage.total = res.data.total
}
} else {
if (res.records.length) {
this.materialList = res.records
this.modalPage.total = res.total
}
}
})
.catch(error => {})
},
},
}
</script>