表单、上传、分页

2022-04-21 08:01:42 阅读：156 来源： 互联网

标签：el 分页 val rules 表单 ruleForm message 上传

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

表单 、上传、分页

表单、上传、分页