记录，总结

1.

例子，在form表单里面，el-select选择宿舍楼，宿舍楼是接口查询的，当选择了宿舍楼，宿舍楼id就会作为参数，去查询所有的宿舍，此时没有分页器，需要作为参数传递给后台，这样查到的是全部数据，不然会出现后台给返回了全部结果，但是页面上展示不完全，

const current = 1
const size = -1

2. table表格里面的单元格文字太多，因为table表格的展示 table-layout是默认aotu，所以他的单元格大小，是靠内容的多少来展示，

table { 
    table-layout:fixed;  //固定table表格的大小
}
table tbody td {
    text-overflow: ellipsis;  //超出的文字用省略号表示
    white-space: nowrap;   //文字在一行不换行
    overflow: hidden;    //超过一行的省略掉
}

3. find方法

let arr = [1,2,3,4,5]
let count = arr.find(item =>{
     item == 4
}
根据函数体的true或false，返回符合条件的第一个数

4.注意细节，对于 增加 修改页面，成功以后要用message提示，删除要用message-box确认是否要删除

5.给后台传参数，如果参数过多,可以赋值给一个data对象，然后把data作为参数传递给后台

const data = {}

6.forEach 和map的区别：forEach没有返回值，map有返回值

7.join方法，把数组转换成字符串。

8. 页面上的搜索条件，点击变色，比如学期，选择第一学期 还是第二学期.

style="cursor: pointer" 鼠标移上变小手

 <li :class="searchForm.xq == '' ? 'bgcSelect' : 'bgc'"
      @click="pickXq('')" 
      style="cursor: pointer">全部
            </li>
            <li
              style="cursor: pointer"
              :class="searchForm.xq == item.value ? 'bgcSelect' : 'bgc'"
              v-for="item in $dictUtils.getDictList('xq')"
              :key="item.value"
              @click="pickXq(item.value)"
            >
              {{ item.label }}
            </li>
<style>
.bgc {
  color: #000000;
  padding: 5px 10px;
}
.bgcSelect {
  color: #ffffff;
  background: #3f8cff;
  padding: 5px 10px;
  border-radius: 6px;
}
</style>

9. el-select v-model绑定的值是el-option里面value的属性值

 <el-select style="width: 100%" v-model="ruleForm.xqdm" placeholder="请选择校区">
                            <el-option
                                v-for="item in xqList"
                                :key="item.xqdm"
                                :label="item.xqName"
                                :value="item.xqdm"
                            ></el-option>
                        </el-select>

10.字典表传递给后台的是value,展示的label

字典表的使用几种方式

//在table表单里面使用，不需要插槽
 <td style="font-size: 12px; width: 20%">
         
   {{ $dictUtils.getDictLabel("xn", ruleForm.xn, "") }}
            
  </td>
//在插槽里面使用 
  <el-table-column prop="jclx" label="检查类型" width="120">
          <template #default="{ row }">
              {{ $dictUtils.getDictLabel("ss_ssws_jclx", row.jclx, "") }}
            </template>
   </el-table-column>
//在下拉菜单el-select里面使用  v-model绑定的是value值
<el-select style="width: 100%" v-model="ruleForm.xslbdm" placeholder="请选择学生类别">
                            <el-option
                                v-for="item in $dictUtils.getDictList('ss_xslb')"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                               </el-option
</el-select>

11. 接口 增删改查

 // 个人宿舍卫生查询 
  reqGetPersonWs: function (params) {
    return request({
      url: prefix + '/ssws/ssws/tSswsSs/queryGrWsPage',
      method: 'get',
      params: params
    })
  },

  // 删除卫生信息
  reqSswsInfoDelete: function (ids) {
    return request({
      url: prefix + '/ssws/ssws/tSswsSs/delete',
      method: 'delete',
      params: {ids: ids}
    })
  },
//保存
reqSswgSave: function (inputForm) {
    return request({
      url: prefix + '/ssws/wglxsz/tSswsWglx/save',
      method: 'post',
      data: inputForm
    })
  },

12. for of 和 include方法 watch监听data里面数据的属性的变化

data(){
  return {
     ruleForm:{
             wglx:''
              }
        }
}
// for of 遍历数组的每一项  wgType是一个数组，里面是对象，对象里面有id和kcfz属性
    watch: {
    "ruleForm.wglx"(val) {
      let total = 100;
      let result = 0;
      for (let item of this.wgType) {
        if (val.includes(item.id)) {
          result += Number(item.kcfz);  //扣除分值是个字符串，需要转换成number
        }
      }

      this.ruleForm.fs = total - result;
     
    }
}