image.png
image.png
返回的数据类型为对象包含几个数组
vue中v-for循环既可以循环数组，对象数组，对象，数字
1.增加整个模块
data(){
singleTransferSet:{}//初始化对象
}
//当在对象中新增一个key-value时，当增肌一个空对象时，采用this.$set避免视图不更新问题
let addIndex = Object.values(this.singleTransferSet).length
this.$set(this.singleTransferSet, addIndex, [{}])
//当新增的数据为以下方法时
let addIndex = Object.values(this.singleTransferSet).length
let obj={
state: 3，
defaultLogo: '0'，
forwardConfigType: 'not_arrive'
}
this.singleTransferSet[addIndex ] = [obj]
//this.singleTransferSet发生了改变但是视图并未发生改变
2.增加某个模块里边的单条数据
由于增加的是整个数据中的单条数据，所以把模块当做一个整体直接增加，在singleTransferSet[index]中增加单条数据
let obj = {
state: 1,
defaultLogo: 0,
forwardConfigType: row.forwardConfigType
}
this.singleTransferSet[index].push(obj)
保存时拆除单条数据即可。
3.匹配当所有状态均为3时，改变界面的选中状态，如何判断所有的状态均为3？
最开始想要取对象的state，组成一个数组，然后在判断是否是3，显然想的太复杂。我们只需要
let arr = this.fullTransfer.filter(item => item.state === 3)
筛选出状态为3的数组，然后判断新数组和老数组的length是不是相等即可。
4.select框回显，以及已选禁用
<el-select v-model="full.carrierId"
placeholder="请选择物流商"
clearable
@change="selectCarrier($event,f)"
:disabled="!checkedConfig"
style="width: 205px;">
<el-option v-for="item in PubCarrier"
:key="item.carrierId"
:label="item.carrierName"
:disabled="JSON.stringify(fullCarrierList).includes(item.carrierId)"
:value="item.carrierId">
</el-option>
</el-select>
//当value值要与v-model绑定的值是同一个类型，否则回显失败
//disabled用于禁用数据，但是仅限于只有一个的时候，如果carrierId='10001';currentCarrierId='10001'两个都是用一个的时候，此种方法不使用
当出现这种情况时，可以采用搜集已经选择的id然后利用 disabled同样可以实现`:disabled="currentCarrierIds.includes(item.carrierId)"`
5.动态绑定数据
当前页面中的数据是绑定在v-model上，并且数组都是动态增加的
image.png
所以例如下拉框当选择之后v-model上就直接赋值了，不要再进行手动赋值。
PS:在表格中新增编辑数据是同样的道理，只需要去操作table中的row即可，不需要重新命名去达到新增修改的赋值效果。
6.文件的上传
<el-upload action="/api/v1/deliver/import"
class="ml10"
:show-file-list="false"
:before-upload="importDeliver"
:data='importData'
:on-error="handlerError"
:on-success="handlerSuccess"
:disabled="isRepeat"
accept=".xls,.xlsx">
<el-button class="iconfont icon-import"
:loading="isRepeat">导入</el-button>
</el-upload>
//导入的时候在action表示上传的接口，如果不写会有一个空的localhost在network上，
//:data='importData'上可以添加除了file之外的参数。
//handlerSuccess是返回结果,判断是成功还是失败
handlerSuccess (res, file) {
this.isRepeat = false
if (res.code === 'SUCCESS') {
this.$message.success('导入成功')
} else {
this.handlerError(res)
}
6.传id问题
该页面的状态有新增，修改，禁用，删除状态之间进行转换。
新增是需要不需要传值id，但是新增数据时是根据索引在数组里增加，所以保存时需要去除id。
另外三种状态需要id达到修改的效果。
可以在保存的时候进行数据改造只传后台需要的参数即可。
网友评论