vue的基础知识（随机更新）

el-dialog中加入 :close-on-click-modal="false" 可以让点击空白不取消

    search(){
      var count = 0;
      for (var i = 0; i < this.ScoreInfo.length; i++) {
        // 限制input框中不能输入数字，不能放在循环后，原因为代码执行顺序问题
        this.ScoreInfo[i].deductPoints = this.ScoreInfo[i].deductPoints.replace(/[^\d]/g,'');
        //  这里将数组中的字符串转换为数字，乘以1就可以
        count = count + this.ScoreInfo[i].deductPoints * 1
      }
      this.form.fraction = count;
    },

vue下拉框中clearable 属性 方法点击

select定义：@clear="getlineFourth1"

方法

   getlineFourth1() {
      getJobTrend().then(response => {
        this.showChart4(response, new Date().getFullYear());
      });
    },

下拉框中点击事件

方法中传绑定的值

@change="cilickFL"

    <el-option
                  v-for="item in classifyList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />

在下面方法中写就可以接到

vue  el-dialog 设置点击旁边不关闭，监听x号的方法

<el-dialog :before-close="handleDialogClose">
</el-dialog>
 
 
methods: {
    /**
    * 点击 X 关闭对话框的回调
    **/
    handleDialogClose() {
       
    }
} 

不允许点外面关闭弹框
第一种:(单个设置)
在el-dialog标签中添加:close-on-click-modal="false"即可

<el-dialog title="标题" :close-on-click-modal="false"  :visible.sync="dialogFormVisible">
  弹窗内容
</el-dialog>

第二种:(全局设置)

在mian.js里面引入并设置：

import ElementUI from 'element-ui';
// 修改 el-dialog 默认点击遮照为不关闭
ElementUI.Dialog.props.closeOnClickModal.default = false

treeselect树中的点击事件

<treeselect v-model="form.deptId" :options="deptOptions" :normalizer="normalizer" @select="workInfo"
                          style="width: 220px" placeholder="选择上级部门"/>

val中就是树里面的所有值

    // 部门树点击事件
    workInfo(val) {
      var params = {
        deptId: val.deptId
      }
      getOutletsByDeptId(params).then(response => {
        this.workInforList = response.data
        this.form.outletsId = null;
      });
    },

设置输入框中只能输入数字，不能输入其他

这里需要使用oninput

oninput = "this.value=this.value.replace(/[^\d]/g,'')"

table列表中需要判断只能输数字的，用于父子表单的

oninput="value=value.replace(/[^0-9.]/g, '')"

table列表中加入这个 设置宽度可以将文字进行缩略显示，鼠标放上去显示全文字

 <el-table-column label="名称" align="left" prop="name" width="400" :show-overflow-tooltip="true"/>

vue常用的规则校验

vue常用校验规则_不丸子的博客-CSDN博客_vue 校验

记录一个vue前台项目启动报的奇葩错误

 

原因 缺少这几个文件

 记录时间插件 后一个时间不能大于前一个时间的方法

在开始时间中定义一个方法，结束时间中全局加一个变量

            <el-form-item label="服务开始时间" prop="serveStartTime">
              <el-date-picker clearable size="small"
                              v-model="form.serveStartTime"
                              type="date"
                              @change="dateServiceChange()"
                              value-format="yyyy-MM-dd"
                              placeholder="选择服务开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务结束时间" prop="serveEndTime">
              <el-date-picker clearable size="small"
                              v-model="form.serveEndTime"
                              type="date"
                              value-format="yyyy-MM-dd"
                              :picker-options="ServiceOptions"
                              placeholder="选择服务结束时间">
              </el-date-picker>
            </el-form-item>

ServiceOptions:{},

方法：

    dateServiceChange() {
      let _this = this; // this赋值给_this
      this.ServiceOptions={ //日期禁用 全局变量
        disabledDate(date) {
          return date.getTime() < new Date(_this.form.serveStartTime).getTime() - 86400000; // 开始时间
        }
      }
      if(this.form.serveEndTime){
        let serveStartTimeText = new Date(this.form.serveStartTime).getTime(); // serveStartTimeText
        let serveEndTimeText = new Date(this.form.serveEndTime).getTime();// 结束时间赋值给serveEndTimeText
        if(serveStartTimeText > serveEndTimeText){ //  俩个进行比较
          this.form.serveEndTime='';
        }
      }
    },

记录el-tabs切换不回到第一个标签页的问题

定义一个 v-model="activeName"

在data中进行声明 activeName: 'first',

在关闭的方法中进行定义

   handleDialogClose() {
      this.activeName = 'first';
      this.dialogVisible = false
    },

记录el-tabs将其中的el-tab-pane禁用

将需要禁用的选项卡加一个:disabled="tabOne"

data中声明一下tabOne:false,

在tabs的点击方法中判断一下

    handleClick() {
      if (this.recordStatus == "1") {
        this.tabOne = true
      }
    },

记录多个list数组嵌套取其中的值

我的list

itemList中的tbPatrolItemList下的tbPatrolItemsStockList中的model

展示数据的地方

 <el-table-column label="故障设备名称" align="center" prop="name">
                <template slot-scope="scope">
                <span >({{getPaterolModel(scope.row.tbPatrolItemsStockList)}}) -- {{getPaterol(scope.row.tbPatrolItemsStockList)}} </span>
                </template>
              </el-table-column>

方法：

    getPaterolModel(row) {
      var idc = '';
      if (row){
        for (var i = 0; i < row.length; i++) {
          idc += row[i].model
        }
      }
      return idc;
    },