首页 > 其他 > 详细

前端小菜鸡使用Vue+Element笔记(二)

时间:2018-10-26 20:59:51      阅读:1861      评论:0      收藏:0      [点我收藏+]

标签:cti   span   inpu   orm   item   color   图片   格式   -c   

记录一下在使用Vue和Element做项目时遇到过的问题~

1、在 <el-table>表格中嵌入 select下拉选择框,以及 tooltip提示框的使用

主要定义格式如红色标记代码

riderPlanListTableData : 是用来填充表格的数据

type=‘index‘ 是对每行都做个序号标记,方便取单行数据以及给单行数据赋值

特别说明一下这个 slot-scope="scope" :这个能定位到行数据,表格中有很多行时,需要通过scope.row去定位行数据 和index一起使用

          <el-table
                :data="riderPlanListTableData"
                stripe
                border
                type="index"
                fit
                style="width: 100%"
                @select-all=‘selectAll‘
                @select="handleSelect">
                <el-table-column
                  prop="careerLevelList"
                  label="产品">
                   <template slot-scope="scope"> <!-- scope.row.riderCGroupName 其中riderPlanListTableData中的属性-->
                    <el-select v-model="scope.row.riderCGroupName" placeholder="产品" clearable class="filter-item" @change="prdnameChange(scope.$index, scope.row)" style="width: 420px" >
                      <el-option v-for="(item,index) in  scope.row.careerLevelList" :key="index" :label="item.riderCName+‘-‘+item.riderEName" :value="item.riderCode+‘_‘+item.careerLevel" />
                      <!-- 当 循环的key定义为index时,会自动取出每一条 能避免key重复的问题 -->
                    </el-select>
                    <el-input v-model=‘scope.row.riderType‘  type=‘hidden‘ class="filter-item"/>  <!-- 设定一个隐藏的input框,因为后面需要用到这个riderType值 >
                   </template>
                </el-table-column>
                <el-table-column
                  prop="sumassured"
                  label="额度">
                  <template slot-scope="scope"> <!-- el-tooltip 这个是在当前输入框中加上提示信息,可以通过在content前面加 : 冒号,动态填充tooltip需要提示的值 -->
                    <el-tooltip class="item" effect="dark" :content="sumassuredTips" placement="top">
                      <el-input v-model="scope.row.sumassured"  @change="sumassuredChange(scope.$index, scope.row)" @focus="sumassuredFocus(scope.row)"   class="filter-item"/>
                    </el-tooltip>
                  </template>
                </el-table-column>
          <el-table-column
            prop="premiumperyear"
            label="每年保费">
          <template slot-scope="scope">
            <el-input v-model=‘scope.row.premiumperyear‘ disabled="true" class="filter-item"/> <!-- <el-input v-model=‘scope.row.prepaidTips‘ type="hidden" class="filter-item"/> -->
          </template>
        </el-table-column>
           </el-table>

响应表格中的额度输入框onFocus的方法:sumassuredFocus(scope.row)  : 这个scope.row可以取到表格中当前行所有的列数据 

/** 附加产品保额的focus焦点获取事件,提示用户当前产品的保额限定值 */
sumassuredFocus(row){  
  if(row.maxSumAssured == 0 && row.maxSumAssured == row.minSumAssured){
    this.sumassuredTips = ‘固定保费附加产品,无需输入保额直接选中即可!‘
  }else{
    this.sumassuredTips = ‘最低保额:‘+ row.minSumAssured + ‘ - 最高保额:‘ + row.maxSumAssured
  }
},

响应表格中的onchange方法:sumassuredChange(scope.$index,scope.row): index可以定位行序号,row可以定为当前行数据

let 和 var:  let 定义的是局部变量,var 定义的是全局变量

this.$set(this.inputForm,‘attribute‘,‘attributeValue‘);  //通过这句话可以给this.inputForm对应的属性赋值

    /**附加产品保额变化的change事件:计算出对应的保费 */
    sumassuredChange(index,row) {
        let inputForm = this.inputForm;   
        this.tmpSplit = (row.riderCGroupName).split(‘_‘);
        this.$set(this.inputForm,‘riderCode‘,‘1234‘);  //如果this.inputForm对象中有riderCode属性,1234则会覆盖riderCode属性值,如果没有则会创建一个riderCode属性并且赋值为1234
        this.$set(this.inputForm,‘careerLevel‘,this.tmpSplit[1]);
        this.$set(this.inputForm,‘sumAssured‘,row.sumassured);this.INPUT_FORM(this.inputForm);
        let inputObj = JSON.stringify(this.inputForm);
        let tmpThis = this; //这里这样子定义是因为进入CalRiderPremiumByCode方法后不能直接使用this,需要使用变量接收this值,然后再在方法里面使用变量
        let indexs = index;
        let row1 = row;

    /** 这一段代码是与后台进行交互
      1、inputObj是方法的入参对象 ,因为在api.js中指定了入参格式为 application/json,所以应该先调用 JSON.stringify()方法格式化入参,再传给后台
2、CalRiderPremiumByCode方法需要在 service包下的 api.js文件中定义,并且在当前使用的文件中声明

    
import {CalRiderPremiumByCode} from ‘../service/api‘ //此声明语句应放在<script>标签下面
  3、res是后台交互方法 CalRiderPremiumByCode(inputObj)的返回值
      4、 tmpThis.$set(...) :这是使用后台返回的数据 给表格中的当前行指定的列输入框赋值,

*/
        CalRiderPremiumByCode(inputObj).then(function(res){
          if(res.code == ‘200‘ && res.msg == ‘ok‘){
              tmpThis.$set(tmpThis.riderPlanListTableData[indexs],‘premiumperyear‘,res.data.result.annuallypremium);
            }else{
              alert(‘后台访问出错,请刷新页面‘);
            }
        }).catch(function(error){
            console.log(error)
        })
      }else{
        alert(‘保额不属于限定范围内,请重新输入!保额的最小值为:‘+ row.minSumAssured+",最大值为:"+ row.maxSumAssured);
      }
    },

表格中嵌套select选择框的效果图:

技术分享图片

tooltip提示框的效果图:

技术分享图片

 

2、<el-input>框设置为不可编辑时可使用 disabled=‘true‘ 或者 readonly=‘true‘

区别: disabled为true:不可编辑且输入框颜色变深

    readonly为true: 不可编辑,输入框颜色不变

 

前端小菜鸡使用Vue+Element笔记(二)

标签:cti   span   inpu   orm   item   color   图片   格式   -c   

原文:https://www.cnblogs.com/DFX339/p/9858663.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号