记录下项目需要的一些实现技巧

将后端返回的html格式的数据文字提取出来

通过将html格式中的字符串赋值给div中的innerHTML得到文字内容

function htmlToText(htmlStr){
 let newDiv = document.createElement("div")
 newDiv.innerHTML=htmlStr
 return newDiv.textContent || newDiv.innerText || ""
}

参考

对数组别使用for in

因为for…in遍历的是对象的key或者是数组的下标。当然最重要的原因是，他会到原型链上寻找，遍历其中新增加的属性的key值

for of遍历的是数组元素值,
for in 遍历的是数组的索引（即键名）
for of遍历的只是数组内的元素，
for in 遍历的不只是数组内的元素，还有其新增的原型属性和索引

for of

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[11,21,41,51,61,71]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}
//输出数组每项的值：11,21,41,51,61,71

for in

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[11,21,41,51,61,71]
myArray.name="数组";
for (var value in myArray) {
  console.log(value);
}
// 输出数据的下标以及新增属性和方法： 0,1,2,3,4,5,method,name

参考

动态增加表单选项

将需要动态增加的表单部分写在一个
标签下，标签内容绑定到formDael中的数组项elbs上。
<div v-for="(elb,index) in formDael.elbs" :key="index"></div>
这里elb就是我们每次添加子表单时要push进数组elbs的内容。
为添加要素按钮绑定一个 addelb()方法，用于在每次添加子表单时，向数组中push一个元素

addelb() {
                this.formDael.elbs.push({
                    elbId: "",
                    fieldId: "",
                });
            }

对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到elb中的元素

<el-form-item label="页签顺序">
  <el-input v-model="elb.fieldNo" auto-complete="off" style="width: 50px">
</el-input></el-form-item>

如果要删除多余elb，需要在
中声明一个removeelb()的方法，来删除对应的elb，这点区别于addelb()，它是定义在
之外的，每次新增的elb都会插到整个表单的末尾。

removeelb(item) {
                let index = this.formDael.elbs.indexOf(item);
                if (index !== -1) { //当没有多余elb时就不再删除
                    this.formDael.elbs.splice(index, 1)
                }
            }

根据这位老哥的思路，实现了动态添加的业务

组件实例
 <el-form>
      <div v-for="(elb, index) in westelble" :key="index">
        <el-form-item style="position:relative;left:20px">
          <el-row>
            <el-col :span="2" style="font-size:10px" v-model="elb.f1" v-show="index == 0">西医病种:</el-col>
            <el-col :span="2" style="font-size:10px" v-model="elb.f1" v-show="index != 0"></el-col>
            <el-col :span="7" v-model="elb.f2">
              <el-select :options="westOptions" :optionsKey="{ value: 'drgId', label: 'drgName' }" size="small"
                style="width:180px" @change="handleChange" v-model="elb.f21"></el-select>
            </el-col>
            <el-col :span="7" v-show="isTrue1" v-model="elb.f3">
              <el-select style="width:90px" size="small"  v-model="elb.f31"></el-select>
              <el-select style="width:90px" size="small"  v-model="elb.f32"></el-select>
            </el-col>
            <el-col :span="7" v-show="isTrue1" v-model="elb.f4">
              <el-select style="width:56px" size="small"  v-model="elb.f41">
              </el-select>
              <el-select style="width:56px" size="small" v-model="elb.f42">
              </el-select>
              <el-select style="width:56px" size="small"  v-model="elb.f43">
              </el-select>
            </el-col>
            <el-col :span="1" v-show="isTrue1"><span @click="removeelb(index)">x</span> </el-col>
          </el-row>
        </el-form-item>
      </div>
    </el-form>

//表单数据
westelble: [{
       f1: "",
       f2: "",
       f21: "",
       f3: "",
       f31: "",
       f32: "",
       f4: "",
       f41: "",
       f42: "",
       f43: "",
     }]

   // 新增方法
   addelb() {
     this.westelble.push({
       f1: "",
       f2: "",
       f21: "",
       f3: "",
       f31: "",
       f32: "",
       f4: "",
       f41: "",
       f42: "",
       f43: "",
     });
   },
   // 删除方法
   removeelb(item) {
     if (item !== -1) {
       this.westelble.splice(item, 1)
     }
   }

参考

css中使用vue中data的数据

在标签中绑定自定义数据data-yourattbute=”yourdata”
css中调用attr方法

数组的at()

let arr = [1,2,3,4,5,6]
arr.at()
1
arr.at(-2)
5