vue中的 slot-scope,row-click,rules校验数据,forceUpdate更刷新页面,$nextTick,setattribute

1.vue中slot-scope

slot-scope="scope"相当于把表单的这一行赋值给scope，然后在后面写的过程中直接用scope调用表单里的内容，常用于对表单的操作。

 <el-table-column label="操作" align="center" class-name="small-padding fixed-width"             
   fixed="right" width="80">
        <template slot-scope="scope">
          <el-button v-no-more-click size="mini" type="text" icon="el-icon-edit" 
                   @click="handleUpdate(scope.row)"
            v-hasPermi="['purchase:supplier:edit']">修改</el-button>
        </template>
</el-table-column>

2.vue中row-click

当表格某一行被点击时会触发该事件，

参数：row, column, event

row-click通常用于处理表格或列表中行的点
击事件。当用户点击表格或列表中的某一行时，row-click事件会
被触发，开发者可以在事件处理函数中编写相应的逻辑来处理这个
点击事件。

<el-row>
      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>

@row-click="handleTableRow" 

handleTableRow(row,column,event){
      this.$router.push(`./info/detail?id=${row.id}`)  //路由跳转
    }

3.vue中的rules

rules为表单校验,属性有
1.required     如果为true，表示该字段为必填
2.message    当不满足设置的规则时的提示信息

3.trigger        校验的触发方式，change（值改变） / blur （失去焦点）两种，
4.pattern       正则表达式，通过正则验证值
5.min            当值为字符串时，min表示字符串的最小长度，当值为数字时，min表示数字的最小值
6.max         当值为字符串时，max表示字符串的最大长度，当值为数字时，max表示数字的最大值
7.validator    如果配置型的校验规则不满足你的需求，你可以通过自定义函数来完成校验，它是一个函数, 有三个参数 (rule(当前规则),value(当前值),callback(回调函数))

  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
       <el-form-item label="流水号" prop="serialNo">
            <el-input v-model="form.serialNo" placeholder="-系统自动生成" disabled />
       </el-form-item>
        <el-form-item label="领料编号" prop="materialRequisitionNo">
            <el-input v-model="form.materialRequisitionNo" readonly>
            </el-input>
        </el-form-item>
      </el-form>





rules: {
          serialNo: [{
            required: true,
            message: "流水号不能为空",
            trigger: "blur"
          }],
          materialRequisitionNo: [{
            required: true,
            message: "领料编号不能为空",
            trigger: "blur"
          }]
}

4.强制更新数据$forceUpdate

this.$forceUpdate()用来全局强制刷新，性能消耗高

因为数据层次（for循环太多）太多，render函数没有自动更新，需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据，触发updated生命周期。

可以在方法后直接添加this.$forceUpdate。

5.$nextTick

在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。
在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。
因为在created()钩子函数中，页面的DOM还未渲染，这时候也没办法操作DOM，所以，此时如果想要操作DOM，必须将操作的代码放在nextTick()的回调函数中。

reset() {
      this.form = {
        id: null,
        title: null,
        content: null,
        publishDatetime: null,
        publisher: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
      this.$nextTick(() => {
        this.fileList = []
        this.showFileList = false
        this.$forceUpdate()
        this.showFileList = true
      })
    },

6.setattribute作用

setAttribute这个方法，在JSP对象中的session和request都有这个方法，这个方法作用就是保存数据，然后还可以用getAttribute方法来获取出来。

作用：设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
参数：name：表示属性名称的字符串; value: 属性的值/新值。

 download(){
      downloadItem({id:this.id}).then(res =>{
        console.log("dddddd", res);
        //拼接完成资源路径
        var file = "http://localhost:8001/"+res.msg;
        console.log(file);
        
        //
        const link = document.createElement('a');
        link.href = file;
        link.setAttribute('download',res.msg);
        link.click();
       
      })
    }