若依-vue前端界面的element-ui复刻

表单

//form表单标签
<el-form
ref=""
:model=""  //表单数据对象，在data中设置一个对象接收表单中的数据
label-width="px" //输入框旁标签大小
size="medium/small/mini"   //表单内组件大小
>

               //1.常规输入框
<el-form-item
label=""   //标签名
prop="表单数据对象的属性名"    //修改表单数据必备
>
<el-input
v-model="表单数据对象.属性名"     //将数据存入表单的数据对象中
placeholder=""           //输入框提示文字
</el-form-item>


               //2.带下拉框的输入框
<el-form-item 
label="类型" 
prop="type" 
style="display: inline-block">
    //下拉框选项配置
  <el-select 
  v-model="表单数据对象.属性名"     //将数据存入表单的数据对象中 
  placeholder="">
     <el-option label="新增"
     value="add"                 //将会被输入到表单对象对应的属性中
     ></el-option>
     <el-option label="修改" value="update"></el-option>
     <el-option label="删除" value="update"></el-option>
     <el-option label="授权" value="accredit"></el-option>
  </el-select>
 </el-form-item>


                //3.选择日期的表单输入框
<el-form-item label="操作时间" prop="date" style="display: inline-block;">
 <el-date-picker
  v-model="operationLogForm.date"
  type="daterange"             //表单类型为日期
  range-separator="-"          //开始日期与结束日期之间的连接符号
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  style="width:240px;">
 </el-date-picker>
</el-form-item>


                //4.搜索和重置按钮
     <!-- 搜索、重置按钮 -->
<el-form-item style="display: inline-block">
 <el-button 
 type="primary"            //按钮的风格类型
 icon="el-icon-search"     //按钮图标
 style="font-size:12px;"  
 @click="onSubmit"          //绑定提交函数
 >搜索</el-button>
 
 <el-button 
  icon="el-icon-refresh"
  style="font-size:12px"
  @click="resetForm('operationLogForm')"   //清除数据按钮，传参：表单的数据对象(将其数据清空)
  >重置</el-button>      
</el-form-item>
        </div>
</el-form>

表格

//表格标签
 <el-table
  ref="multipleTable"
  :cell-style="{padding:'8px 0'}"         //单元格样式
  :data="tableData"                       //存放表格的数据以及分页方式(使用计算属性，否则对选框处存在bug
  tooltip-effect="dark"
  style="min-width: 1280px;"
  @selection-change="handleSelectionChange"   //多选框发生变化时触发的函数
        >
            
            //1.第一列，多选框
 <el-table-column
  type="selection">     //将第一列设置成多选框
 </el-table-column>
 
             //2.可以排序的列
 <el-table-column
  prop="id"                   //该列所对应的表格对象的属性
  label="日志编号"            //标签名
  sortable>                   //该列是否可以进行排序
</el-table-column>
    
             //3.普通列
<el-table-column
 prop="system"
 label="系统模块">
</el-table-column>

            //4.带自定义内容的列
<el-table-column
 prop="type"
 label="操作类型">
                 //插槽，插入要自定义的内容
    <template slot-scope="scope">
     <el-tag  //标签组件
      :type="scope.row.handleType">   //根据表中数据，设置标签的类型
          {{scope.row.type}}          //表中此行数据
     </el-tag>
    </template>
</el-table-column>
 
             //5.带自定义内容的列————按钮
<el-table-column
 prop="handle"
 label="操作"
 align="center">
  <template slot-scope="scope">
    <el-button 
    @click="handleClick(scope.row)"  //按钮上绑定的行数，传参：此列此行的内容
    type="text"
    size="small">查看</el-button>
   </template>
</el-table-column>

</el-table>

分页器

<el-pagination
 background                                  //带有背景色的分页
 @size-change="handleSizeChange"             //page-size改变时触发的函数
 @current-change="handleCurrentChange"
 :current-page="currentPage"
 :page-sizes="[10,20,30,40]"                 //选择每页显示多少行(多少条信息)
 :page-size="pagesize"                       //默认每页显示多少行
 layout="total, sizes, prev, pager, next, jumper"     //分页器显示的功能
             total：共多少条，sizes：调整每页显示的条数，prev：上一页，pager：页码，next:下一页，jumper：跳转到多少页
 :total="tableCon.length">           //共多少条：表格数据对象的长度
 </el-pagination>