前端歌谣-第壹佰一十三课-分析vue2中的ref操作

原创

前端导师歌谣 2024-03-18 14:53:29 ©著作权

文章标签 前端 ide 初始化重置 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者前端导师歌谣的原创作品，请联系作者获取转载授权，否则将追究法律责任

前言

大家好我是歌谣今天继续给大家带来代码的解读

首先已知页面的组件为

<release-embryos-dialog ref="releaseEmbryosRef" @ok="searchChange" @close="refreshChange"/>

明细和新增出发不同的方法

handleCreated () {
      this.$refs.releaseEmbryosRef.init(1)
    },
    // 明细
    handleRow (row) {
      this.$refs.releaseEmbryosRef.init(2, row)
    }

看到这一步还是很妙啊自己不会用

来到组件内部不同的数据对应不同的初始化操作

init (type, row) {
      this.type = type
      this.visible = true
      if (type === 1) {
        this.tableOption = tableDetailOption
        this.title = `创建毛坯发出单`
        this.tableData = []
        this.$nextTick( () => {
          this.$refs.form.resetForm()
        })
      }
      if (type === 2) {
        this.tableOption = tableDetailOptionLook
        this.detail = row
        this.title = `毛坯发出单详情`
        this.getDetailList()
      }
    },

页面的主体逻辑也是不一样的是通过判断走出来的

<avue-form ref="form" v-model="form" :option="formDetailOption" @submit="submit" v-if="type === 1">
      <template slot-scope="scope" slot="groupNo">
        <el-input v-model="form.groupNo" @keyup.enter.native="handleSearchInfo" placeholder="扫码或者直接进行输入组批号"/>
      </template>
      <template slot="menuForm">
        <el-button type="primary" @click="handleAddItem">新增</el-button>
        <el-button @click="handleReset">重置</el-button>
      </template>
    </avue-form>
    <el-descriptions title="" v-if="type === 2">
      <el-descriptions-item label="毛坯发出单编号">{{ detail.inventoryNo }}</el-descriptions-item>
      <el-descriptions-item label="申请日期">{{ detail.createTime }}</el-descriptions-item>
      <el-descriptions-item label="申请人">{{ detail.createBy }}</el-descriptions-item>
    </el-descriptions>
    <avue-crud
      class="avue-affixed avue-new-table hide-menu-header"
      ref="crud"
      :option="tableOption"
      :table-loading="listLoading"
      :data="tableData"
    >
      <template slot-scope="scope" slot="returnTotalQty">
        <div v-if="type === 2">{{ scope.row.returnTotalQty }}</div>
        <el-input v-else type="number" placeholder="回厂总数量" v-model="scope.row.returnTotalQty"></el-input>
      </template>

      <template slot-scope="scope" slot="returnDetails">
        <div v-if="type === 2">{{ scope.row.returnDetails }}</div>
        <el-input v-else placeholder="回厂详情" v-model="scope.row.returnDetails"></el-input>
      </template>
      <template slot-scope="scope" slot="blankDeliveryDate">
        <div v-if="type === 2">{{ scope.row.blankDeliveryDate }}</div>
        <el-date-picker v-else v-model="scope.row.blankDeliveryDate" value-format="yyyy-MM-dd" placeholder="发出日期"></el-date-picker>
      </template>
      <template slot-scope="scope" slot="totalQtyIssued">
        <div v-if="type === 2">{{ scope.row.totalQtyIssued }}</div>
        <el-input v-else type="number" placeholder="发出总数量" v-model="scope.row.totalQtyIssued"></el-input>
      </template>
      <template slot-scope="scope" slot="blankOutboundWeight">
        <div v-if="type === 2">{{ scope.row.blankOutboundWeight }}</div>
        <el-input v-else type="number" placeholder="发出总重量" v-model="scope.row.blankOutboundWeight"></el-input>
      </template>
      <template slot-scope="scope" slot="detailedDeliveryInBatches">
        <div v-if="type === 2">{{ scope.row.detailedDeliveryInBatches }}</div>
        <el-input v-else placeholder="分次发出详细" v-model="scope.row.detailedDeliveryInBatches"></el-input>
      </template>
      <template slot-scope="scope" slot="menu">
        <table-column-btns  :btns="tableBtns" :scope="scope"></table-column-btns>
      </template>
    </avue-crud>