vue常用技巧

1、ID自增

        type="index"。

2、vue在页面加载后执行某个方法

        在生命周期create或者mounted中执行。

3、v-if删除节点，v-show隐藏节点

4、前端根据条件展示不同内容

<el-table-column
        prop="projectStatus"
        header-align="center"
        align="center"
        label="项目状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.projectStatus == 0" type="small">正常</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>

5、选择组件

<el-form-item label="网关接入" prop="gatewayCode">
	<el-select @change="changeProject" v-model="dataForm.gatewayCode" placeholder="请选择网关" style="width: 100%;">
	    <el-option
	      v-for="item in gatewayList"
	      :key="item.gatewayCode"
	      :label="item.gatewayName"
	      :value="item.gatewayCode">
	    </el-option>
	</el-select>
	</el-form-item>

// 提交到后台数据
 dataForm: {
            gatewayCode: '',
			gatewayName: '',
        },

// 待选择数组
gatewayList:[],

// 数组中item
gateway: {
			gatewayCode: '',
			gatewayName: '',
		},


 // 获取select的value值
	  changeProject(){
	  		  let that = this
	  		  let dom = that.projecList.filter(function (c, i, a) {
	  			  if (c.projectCode == that.dataForm.projectCode) {
	  				  return c
	  			  }
	  		  })
	  		  that.dataForm.projectName = dom[0].projectName;
	  },


 // 获取所有网关
	  getAllGateway () {
	    this.gatewayList = []
	    this.$http({
	      url: this.$http.adornUrl('/device/gateway/listAll'),
	      method: 'get',
	      params: '',
	    }).then(({data}) => {
	      if (data && data.code === 0) {
	        for (var i = 0; i < data.list.length; i++) {
	          this.gateway.gatewayCode = data.list[i].gatewayCode
	          this.gateway.gatewayName = data.list[i].gatewayName
	          this.gatewayList.push(this.gateway)
	          this.gateway = {}
	        }
	      } else {
	        this.gatewayList = []
	      }
	    })
	  },

6、列表加颜色

参考element文档

7、列表字段加背景色

<el-table-column
            prop="parentName"
            header-align="center"
            align="center"
            label="一级项目">
            <template slot-scope="scope">
              <el-tag
                :type="primary"
                disable-transitions>{{scope.row.parentName}}</el-tag>
            </template>
          </el-table-column>

8、列表修改下拉框数据显示名称问题

      解决  :value=" item.id+'' " 

 <el-form-item label="代理商" prop="daiId">
    	<el-select @change="changeDai" v-model="dataForm.daiId" placeholder="请选择待分配代理商" style="width: 100%;">
    	    <el-option
    	      v-for="item in daiList"
    	      :key="item.daiId"
    	      :label="item.daiName"
    	      :value="item.daiId+''">
    	    </el-option>
    	</el-select>
    	</el-form-item>

9、Input不允许修改

<Input name="a" v-model="formValidate.coName" placeholder="请输入姓名" v-bind:disabled="diasabledInput"></Input>

xport default {
      
        data () {
          
            return {
                diasabledInput:false,
            }
        }，
     methods: {
            handleSubmit:function () {
                  if(this.diasabledInput){
                   this.diasabledInput=false;
                }else{
                   this.diasabledInput=true;
                }
            }
    }

10、GET请求

saveDiscounts () {
            this.$http({
              url: this.$http.adornUrl('/admin/projecttwo/updateDiscounts'),
              method: 'get',
              params: this.$http.adornParams({
                'page': this.pageIndex,
                'limit': this.pageSize,
                'key': this.dataForm.key
              })
            }).then(({data}) => {
              if (data && data.code === 0) {

              } else {

              }
            })
          },