前端常用的方法

vue+elementUI

1、Table表格中要在最前面添加index索引

<el-table-column
      type="index"
      width="50">
</el-table-column>

2、编辑功能把某一个字段设置为无法修改（只读模式），添加 readonly或者disabled

①使用属性 readonly=“true” 方式，输入框或文本域无灰色底；

②使用属性 :disabled=“true” 方式，输入框或文本域有灰色底。

<el-input readonly v-model="editForm.projectId" autocomplete="off"></el-input>

<el-input :disabled="true" v-model="editForm.projectId" autocomplete="off"></el-input>

3、list列表前面加多选框,在第一行加上：

<el-table-column type="selection" width="55" align="center"/>

4、在table表格前面加上序号,，序号并且随着分页自动排序递增：

注意：要注意到pageNum和pageSize定义在哪里，我这里是定义在queryParams的对象里

<el-table-column label="序号" width="70px">
        <template slot-scope="scope">
           {{scope.$index+1+(queryParams.pageNum-1)*queryParams.pageSize}}
        </template>
</el-table-column>

5、输入框input设置长短：style="width:20%"

  <el-input v-model="name" placeholder="请输入内容" style="width:20%"></el-input>

6、正则表达式及test方法判断字符串中是否含有某个字符串

		let rule_temp = RegExp(/rule_temp_/);//正则表达式表示含有字符串rule_temp_
        let top_down = RegExp(/top_down.car_type_id/);//正则表达式表示含有字符串top_down
        // 通过test方法判断字符串this.rulesText是否含有rule_temp_和top_down
        if(top_down.test(this.rulesText) && rule_temp.test(this.rulesText)){}

7、js截取字符串中的某一段：substring方法

q = this.tempShow.substring(0,this.tempShow.length-2);

8、if条件判断逻辑

if(OCR.test(this.rulesText))
        {
          if(!rule_temp.test(this.rulesText) && !list_data.test(this.rulesText)
            && !msrp_data.test(this.rulesText) && !vin_master_data.test(this.rulesText)
            && !top_down.test(this.rulesText)
          )

9、数组下标的一种呈现方式

this.tempTableNameArray[this.dynamicTags.length - 2]

10、 let that = this：传参的一种表现形式

 queryTempDataList(){
        let querySql = null;
        querySql = 'select * from' + ' ' + this.tempTableName//查询当前临时表的所有数据的SQL语句
        let that = this;
        queryTempDataList({querySql:querySql}).then(response =>{

          that.tempDataList = response//查询到的数据赋值给tempDataList数组
        })
    },

11、js字符串的startsWith方法

/**字符串this.ruleAreaList2[j]['key']以ocr.开头*/
this.ruleAreaList2[j]['key'].startsWith('ocr.')

12、js字符串的slice方法

//从下标为4开始（包含下标是4的字符）截取字符串到最后
this.ruleAreaList2[j]['key'] =  this.ruleAreaList2[j]['key'].slice(4)

13、js字符串的indexOf方法

//获取字符串AS中A的下标
let xiabiao =  this.ruleAreaList2[j]['key'].indexOf('AS')

14、js字符串replace方法和trim方法

 //replace("(","_")：遇到左半边括号，替换成下划线
let a = this.ruleAreaList2[j]['key'].replace("(","_").replace(")","").replace(".","_").trim()

15、js字符串的charAt方法

//截取下标为rankNumber.length-1的字符
let rank = rankNumber.charAt(rankNumber.length-1)

16、that传参的方式和if中的判断

// 通过临时表名查临时表
    getTempTable(){
      var that = this;
      if(that.tempTableName != null || that.tempTableName != undefined){
      selectTempTable({tempTableName:that.tempTableName}).then(res => {//把临时表名放到后台，临时表可能为空，
        that.tempName = res
      })
    }
    },

17、if中的res.code== '200’判断和that.msgSuccess的使用

 addChild(a).then(res => {
        if(res.code== '200'){
          that.msgSuccess('相关车型基本奖励和额外奖励维护成功');
          }

18、js的splice方法

 this.ruleAreaList.splice(this.ruleAreaList.indexOf(tag), 1)

19、{ colName: this.search }的传参方式（注意data和params的区别）

 queryRuleCol() {
      listDescription({ colName: this.search }).then(res => {
        this.descLoist = res.rows
      })
    },

20、跳转首页

 /** 跳转首页 */
      点击跳转至上次浏览页面
       this.$router.go(-1)
      指定跳转地址
     goToLink() {
       this.$router.replace('/index')
     },

21、JavaScript字符串截取成数组

var str="hello,word,java,eclipse,jsp";
//字符串截取为数组
var strArr=str.split(",");
for(j = 0,len=strArr.length; j < len; j++) {
    alert(strArr[j]);
};

22、JavaScript字符串遍历

var str = 'hshsk'
    for (let index in str) {
        console.log(str[index]);
    }