各种

 

1、滚动条

　　　　给相应的元素设置高度和overflow为自动（如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。）

　　　　　　.headerDiv {

  　　　　　　  height: 450px;

    　　　　　　overflow: auto;

　　　　　　　}

 

 2、表格里面嵌套输入框 scope

            <el-table-column align='center'

                prop="dataSource"

                label="数据源"

                width="200">

                <template slot-scope="scope">

                    <el-input v-model="scope.row.dataSource" placeholder="请输入内容"></el-input>

                </template>

 

3、通过数据插槽可以获取到table的索引  scope.$index

                <template slot-scope="scope">

                    <i @click="handleDelete(scope.$index,scope.row)" class="el-icon-delete"></i>

                </template>

 

4、数组里面增加，删除

          this.headerDynamicItem.push({

            name: '',

            value: ''}）

 

           根据索引删除 this.headerDynamicItem.splice(index, 1)

 

 5、element ui 字体颜色 直接在样式里面定义是会不生效的，可通过以下方式修改字体成功

　　样式

.　　　　apiManagerDiv>>>.el-form-item__label{

   　　　　　　 font-size: 12px

　　　　　　}

　　　　.apiManagerDiv>>>.el-tabs__item{

   　　　　　　 font-size: 12px

    　　　　}

　　　　.apiManagerDiv>>>.el-button--mini, .el-button--small{

        　　　　font-size: 12px

　　　　　　}

　　　　template

 

6、filter过滤数组

        let newEditableTabs = this.editableTabs.filter((x)=>x.title==addName)

 

7、对象转map,遍历map

            const map = new Map(Object.entries(result.data));

            console.log(map)

            for (var [key, value] of map) {

              console.log(key + ' = ' + value);

              this.careerOptions.push({

                value: value,

                label: key

              })

            }

 8、按钮的隐藏

      <el-button type="success" @click='submitApplyForm' :disabled='applySubmitDisabled'>按钮</el-button>

 

9、同一列中有下拉框和输入框，如果两者长度不一样

可通过如下处理：style="width: 100%"

<el-select v-model="Form.method"  size="small" style="width: 100%">

 10、转换后台返回的数据  formatter

        <el-table-column prop="state" label="状态" width="100px" sortable show-overflow-tooltip :formatter="stateFormatter"></el-table-column>

 

  stateFormatter(row,index) {

    

      if(row.state=="overdue"){

          return "逾期"

      }else if(row.state=="approved"){

          return "等待签约"

      }}

11、表格可以设置最大高度，超过就出现滚动条 

                          <el-table

                            :data="refundBniData"

                            border

                            style="width: 100%" max-height="300">

12、隐藏标签元素

style='display:none'   style='display:block'

13、element ui有些组件使用click不生效，可以使用click.native

 

14、使用jsonview 插件需要将string转化为json格式

JSON.parse(row.str)

15、样式

                  <span v-if="sfy" style="font-weight:bold">请求参数: 

 16对象转string,string转对象

对象转string

var str = JSON.stringify(jsObj);

 string转对象

var str1 = JSON.parse(str);

 17清空数据

慎用：

  this.testMachine ={ }

应该用：

                this.testMachine = {

                    id: "",

                    mobilePhoneBrands: "",

                    phoneModel: "",

                    systemVersion: "",

                    holder: "",

                    Remark: ""

                };