Elementui中ref和scope的使用

38次阅读

共计 1084 个字符,预计需要花费 3 分钟才能阅读完成。

ref 一般写在 el-form 中,以作为验证表单时使用
<el-form

    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="250px"
    class="demo-ruleForm"
  >

</el-form-item>
在调接口前作验证
this.$refs[formName].validate(valid => {

    if (valid) {console.log("11");
      upDataPc(updateAddinfo).then(res => {this.resetForm(formName);
          this.$message.success("修改批次成功");
          this.addBatchDialog = false;
          this.getBatchList();});

在 el-table-column 中可以添加 template 插槽通过 scped.row 加属性拿到 data 中的对应数据

 <el-table-column prop="bzftype" label="保障房类型" align="center">
    <template slot-scope="scope">
      <span v-if="scope.row.bzftype == 0"> 公共租赁住房 </span>
      <span v-if="scope.row.bzftype == 1"> 廉租住房 </span>
    </template>
  </el-table-column>
  <el-table-column prop="stime" label="开始日期" align="center"></el-table-column>
  <el-table-column prop="etime" label="结束日期" align="center"></el-table-column>
  <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <el-button @click="updateBatch(scope.row.id)" type="text" size="small"> 编辑 </el-button>
      <span v-if="scope.row.sfysy==0">|</span> 
      <el-button v-if="scope.row.sfysy==0" @click="deleteBatch(scope.row.id)" type="text" size="small"> 删除 </el-button>
    </template>
  </el-table-column>

正文完
 0