表单 、上传、分页

2.el-form

:v-model="ruleForm"

表单校验：item中的prop（：rules="fRules",） 和 v-model=“ruleForm.resource”

  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>　　

:rules 是data中国的一个用于校验的对象

rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],

ruleForm是表单的内容

ruleForm：{
 resource:"",
 name:"",
}

  一列写样式

el-table-column(label="重命名" align="center" width="80px")
    template(#default="{row}")
        el-checkbox(v-model="row.priAll")

　　

3.上传el-uplaod

注意写上@preview 点击查看图片  

auto-upload=“false”，请求时在上传

若要去掉+。可以在样式上去掉

简单的上传文件：

//文件类型，是否显示列表
<el-upload 
:show-file-list="false" 
ref="imExl" 
accept="file" 
action="/" 
:http-request="importExcel">
//多个文件，改变时，删除时，
<el-upload  
multiple 
:on-change="fChange"  
:on-remove="fChange" 
action="" 
:style="imgStyle" > 导入excel  </el-upload>


 //js improtEx(val){ 
   let fd=new FormData();
   fd.append("file",val.file);
    return Interface(fd); 
   } 

  async importExcel(val){ 
    await this.improtEx(val); 
    this.getList();//刷新列表
    this.$message.info("导入成功"); 
}
　　

　

1.el-pagination

 按要求来，

1.1小型分页 添加small

1.2 添加背景色 background

1.3设置最大的码数 ：pager-count

 <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
      :total="400"
      :current-page="currentPage4"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 50,100, 150]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      >
    </el-pagination>
  </div>

　　

　　

 

标签：el,分页,val,rules,表单,ruleForm,message,上传
来源： https://www.cnblogs.com/lxq3280/p/16168836.html