关于Vue的项目中的一些常用操作

关于Vue的项目中的一些常用操作

Form表单

<!--绑定js中声明的dataForm --> 
<el-form :model="dataForm" :data="importList" @keyup.enter.native="getDataList()">

data里面绑定

element里面的使用prop映射，不然网页端不会显示的

关于提交的话，需要在method里面进行操作的哈

methods:{
    submit:function(){
      vm.$http.post('reimbursement/postTravelItineraryRequest',body).then(function (res){
          if (num === 0){
              this.$message({
                  showClose: true,
                  message: '提交失败',
                  type: 'error'
              });
              return slef.$message.error(res.data.msg);
          }else{
              this.$message({
                  showClose: true,
                  message: '提交成功'
              });
          }
      }).catch(function (){});
    }
}

有时候我们需要拿到其它请求放法里面的数据，我们需要怎么做呢？

方法一：

   getAndAdd: function (){
                // console.log("=======>"+this.dataForm.number);
                var self = this;
                var body = {
                    ticketNo : this.dataForm.ticketNo,
                    passengerName: this.dataForm.passengerName
                }
  vm.$http.post('reimbursement/queryTicketDetails',body).then(function (res){
                        if (res.data.code !== 0){
                            return self.$message.error(res.data.msg);
                        }
                        self.dataList = res.data.data;
                        self.dataList1 = res.data.data.not;
                        self.dataList2 = res.data.data.ok;
                    }).catch(function (){});
            },

这时候我们需要在方法二里面拿到dataList1

怎么做呢？

     var self = this;
    if (self.dataList1 != null){
            var segments = self.dataList1;
        }

这样就可以在方法二里面拿到方法一的数据了

关于拿到对应的数据问题，我遇到比较麻烦的就是，对象里面还有一个对象

例如：

data:[
    color:'',
    fishs:[{
    	ll:'',
    	dd:'',
    }]
]

只需要

   if (this.dataList1 != null){
       for(var i = 0; i < this.data; i ++){
           var fishs = this.data[i].fishs;
       }
     }

这样就可以拿到对应的数据了

如果需要提交表单的话，我们需要在data:function里面定义表单名，然后在前端绑定表单名

关于数据回显问题

有时候我们需要从后端拿到数据，渲染到页面，对于使用惯了el表达式或者thymeleaf的同学们来说，可能会有点不习惯。

首先我们需要认识一个在前端绑定的就是:data

如

然后我们在这个dataList2里面会有对应的字段，就是你后端返回的json数据

通过prop属性映射

页面设置：

<el-table v-loading="dataListLoading" :data="dataList2" v-show="show1" border
          @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
    <el-table-column prop="passengerName" label="姓名" header-align="center" v-model="dataForm.passengerName"
                     align="center"></el-table-column>
    <el-table-column prop="ticketNo" label="票号" header-align="center"
                     align="center"></el-table-column>
    <el-table-column label="航程" header-align="center" align="center" prop="segments[0].flightSegmentCnName" v-model="dataForm.passengerName">
    </el-table-column>
    <el-table-column label="航班日期" header-align="center" align="center"  prop= "segments[0].flightDate">
    </el-table-column>
    <el-table-column prop="jpkfpTicketPrice" label="票价" header-align="center"
                     align="center"></el-table-column>
    <el-table-column label="币种" header-align="center" align="center" prop="segments[0].flightDate">
    </el-table-column>
    <el-table-column prop="officeNo" label="出票终端" header-align="center"
                     align="center"></el-table-column>
    <el-table-column prop="msg" label="状态" header-align="center" align="center"></el-table-column>

    <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center"
                     width="150">
        <template slot-scope="scope">
            <el-button  type="danger"
                       @click="deleteHandle()">{{ $t('deleteBatch') }}
            </el-button>
        </template>
    </el-table-column>
</el-table>

vue中：

getAndAdd: function (){
    // console.log("=======>"+this.dataForm.number);
    var self = this;
    var body = {
        ticketNo : this.dataForm.ticketNo,
        passengerName: this.dataForm.passengerName
    }
      vm.$http.post('reimbursement/queryTicketDetails',body).then(function (res){
            if (res.data.code !== 0){
                return self.$message.error(res.data.msg);
            }
            self.dataList = res.data.data;
            self.dataList1 = res.data.data.not;
            self.dataList2 = res.data.data.ok;
        }).catch(function (){});
},

数据的话就不方便展示了，主要就是你prop后面的字段和dataList里面的json是可以对应的，就会自动映射上去了。

表单校验

使用rules来进行表单校验

第一步：

第二步，使用prop绑定属性

在js里面

在同一个computed里面写一个

进行校验