开发中遇到的各种问题整理

开发中遇到的各种问题整理：

1、vue相关

      a、element-ui 之 el-table循环绑定 input ，并结合 el-form表单校验（代码段实例）：

<el-form class="addObjectForm" :model="addObjectForm" ref="addObjectForm" label-width="124px">

 <el-table :data="addObjectForm.Positions">
    <el-table-column type="index" align="center"></el-table-column>
    <el-table-column prop="longitude" label="列1" align="center">
        <template slot-scope="scope">
            <el-form-item :prop="`Positions[${scope.$index}].longitude`" :rules="rules.numPot3">
                <el-input v-model="addObjectForm.Positions[scope.$index].longitude"></el-input>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column prop="latitude" label="列2" align="center">
        <template slot-scope="scope">
            <el-form-item :prop="`Positions[${scope.$index}].latitude`" :rules="rules.numPot3">
                <el-input v-model="addObjectForm.Positions[scope.$index].latitude"></el-input>
            </el-form-item>
        </template>
    </el-table-column>
    <el-table-column prop="height" label="列3" align="center">
        <template slot-scope="scope">
            <el-form-item :prop="`Positions[${scope.$index}].height`" :rules="rules.numPot3">
                <el-input v-model="addObjectForm.Positions[scope.$index].height"></el-input>
            </el-form-item>
        </template>
    </el-table-column>
</el-table>

</el-form>

 

export default {

    data() {

      return {

        addObjectForm: {

          Positions:[],

        }

      }

    },

    mounted(){

    },

  }

 

2、各种浏览器兼容性问题

a、IE11、IE10、IE9， 不支持 js对象的 动态属性定义 的写法，如：

      var obj1 = { p1: 1, p2: 2 }

      var obj2 = { [obj1.p1] : 3}

      用这种写法 来动态定义 obj2的属性会报错，注：chrome、Firefox浏览器 则支持该写法；

      可以用 obj2[obj1.p1] = 3，这种方式来动态定义obj2的属性；

3、css相关

a，图片按比例自适应显示(宽高比3：2)

.img{

    width: 100%;

    height: 0;

    padding-bottom: 66.7%;

    overflow: hidden;

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    background-image: url('...');

}