单位切换且后换算得方法

1.css样式，设置焦点失去和单位切换得方法，且单位联动，单位得v-model绑定得要是一样得就行，方便后面做联动

//输入，并且可以切换单位
 <el-form-item class="formCss flexStyle">
            <div style="width:100px;    line-height: 1;">{{ $t('message.designflowrate') }}</div>
            <div>
              <el-input @blur="flowrateinputBlur('设计')" v-model="flowrateObj.design" style="width: 240px" />
              <el-select @change="flowrateinputBlur('设计')" v-model="selectionCalculationForm.designUnit" placeholder="Select" style="width: 240px">
                <el-option v-for="(item,index) in flowrateUnit" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>

          </el-form-item>
          <el-form-item class="formCss flexStyle">
            <div style="width:100px;">{{ $t('message.maxfowrate') }}</div>
            <div>
              <el-input @blur="flowrateinputBlur('最大')" v-model="flowrateObj.maximum" style="width: 240px" />
              <el-select @change="flowrateinputBlur('最大')" v-model="selectionCalculationForm.designUnit" placeholder="Select" style="width: 240px">
                <el-option v-for="(item,index) in flowrateUnit" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item class="formCss flexStyle">
            <div style="width:100px;  line-height: 1;">{{ $t('message.operationflowrate') }}</div>
            <div>
              <el-input @blur="flowrateinputBlur('操作')" v-model="flowrateObj.operating" style="width: 240px" />
              <el-select @change="flowrateinputBlur('操作')" v-model="selectionCalculationForm.designUnit" placeholder="Select" style="width: 240px">
                <el-option v-for="(item,index) in flowrateUnit" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item class="formCss flexStyle">
            <div style="width:100px;">{{ $t('message.minflowrate') }}</div>
            <div>
              <el-input @blur="flowrateinputBlur('最小')" v-model="flowrateObj.minimum" style="width: 240px" />
              <el-select @change="flowrateinputBlur('最小')" v-model="selectionCalculationForm.designUnit" placeholder="Select" style="width: 240px">
                <el-option v-for="(item,index) in flowrateUnit" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-form-item>






//用于展示单位换算后得数据

 <el-form-item class="formCss" flexStyle>
            <div style="width:100px;    line-height: 1;">{{ $t('message.designflowrate') }}</div>
            <div>
              <el-input disabled v-model="countToFixedObj.design" style="width: 240px" />
              <el-input disabled value='kg/hr' style="width: 110px;color:black" />
            </div>
          </el-form-item>
          <el-form-item class="formCss" flexStyle>
            <div style="width:100px;">{{ $t('message.maxfowrate') }}</div>
            <div>
              <el-input disabled v-model="countToFixedObj.maximum" style="width: 240px" />
              <el-input disabled value='kg/hr' style="width: 110px" />
            </div>
          </el-form-item>
          <el-form-item class="formCss" flexStyle>
            <div style="width:100px;  line-height: 1;">{{ $t('message.operationflowrate') }}</div>
            <div>
              <el-input disabled v-model="countToFixedObj.operating" style="width: 240px" />
              <el-input disabled value='kg/hr' style="width: 110px" />
            </div>
          </el-form-item>
          <el-form-item class="formCss" flexStyle>
            <div style="width:100px;">{{ $t('message.minflowrate') }}</div>
            <div>
              <el-input disabled v-model="countToFixedObj.minimum" style="width: 240px" />
              <el-input disabled value='kg/hr' style="width: 110px" />
            </div>
          </el-form-item>

2.方法，切换单位后转换值，使用switch对所有需要的单位匹配

private flowrateinputDesign() {
    let flowratemin_kg_hr = null
    let flowratemin_m3_hr = null
    let flowratemin_m3_s = null
    this.numDesin = []
    flowratemin_kg_hr = null
    flowratemin_m3_hr = null
    flowratemin_m3_s = null
    switch (this.selectionCalculationForm.designUnit) {
      case 'g/s':
        flowratemin_kg_hr = this.flowrateObj.design * 3.6
        flowratemin_m3_hr = this.flowrateObj.design * 0.0040770102
        flowratemin_m3_s = this.flowrateObj.design * 0.0000013

        this.numDesin.push({
          kg_hr: flowratemin_kg_hr,
          m3_hr: flowratemin_m3_hr,
          m3_s: flowratemin_m3_s
        })

        this.countObj.design = this.numDesin[0].m3_s
        this.countToFixedObj.design = this.numDesin[0].kg_hr.toFixed(3)
        return
      case 'g/hr':
        flowratemin_kg_hr = this.flowrateObj.design * 0.001
        flowratemin_m3_hr = this.flowrateObj.design * 0.0000011325
        flowratemin_m3_s = this.flowrateObj.design * 0.000000000315

        this.numDesin.push({
          kg_hr: flowratemin_kg_hr,
          m3_hr: flowratemin_m3_hr,
          m3_s: flowratemin_m3_s
        })
        this.countObj.design = this.numDesin[0].m3_s
        this.countToFixedObj.design = this.numDesin[0].kg_hr.toFixed(3)
        return
  

      default:
    }
  }

3.单位联动

private flowrateinputBlur(text) {
//调用 单位换算得方法，实现单位切换后，右边得数值跟着换算
    this.flowrateinputDesign()
    if (text == '最大') {
          this.flowrateinputMax()
        } else if (text == '最小') {
          this.flowrateinputMin()
        } else if (text == '操作') {
          this.flowrateinputOperating()
        } else if (text == '设计') {
          this.flowrateinputDesign()
        }
}