avue表单常规使用说明——vue

avue是基于element二次封装的框架

<template><!-- vue的模板元素标签 -->
    <div class="execution">
        <basic-container>
            <avue-crud               <!-- avue的表格标签 -->
                       ref="crud"    <!-- 在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件 -->
                       :page="page"  <!-- 表格分页配置选项 -->
                       :data="tableData"   <!-- 表格显示的数据 -->
                       :permission="permissionList"
                       :table-loading="tableLoading"  <!-- 表格等待框的控制-->
                       :option="tableOption"          <!-- 表格配置属性-->
                       @on-load="getList"
                       @selection-change="selectionChange"     <!-- 当选择项发生变化时会触发该事件  -->
                       @search-change="searchChange"         <!-- 点击搜索后触发该事件  -->
                       @refresh-change="refreshChange"    <!-- 点击刷新按钮触发该事件  -->
                       @row-update="handleUpdate"    <!-- 编辑数据后确定触发该事件  -->
                       @row-save="handleSave"    <!-- 新增数据后点击确定触发该事件  -->
                       @row-del="rowDel">    <!-- 行数据删除时触发该事件  -->
              <template slot="expand" slot-scope="scope">    <!-- 卡槽expand模板是：表格展开折叠行布局。要在tableOption对象的js中搭配expand:true使用；传入的scope为当前行的对象，可通过scope.row获取  -->
                联系电话：{
  
  {scope.row.lxdh}}  ,产品费用：{
  
  {scope.row.cpfy}} ,产品销售净额：{
  
  {scope.row.xsje}}
              </template>
              <template slot="menuLeft" slot-scope="scope">    <!-- 卡槽menuLeft模板是：表格上方菜单栏按钮。  -->
                <el-button type="primary"
                           icon="el-icon-plus"
                           size="small"
                           @click.stop="rowAdd(scope.row)">添加交易</el-button>
                <el-button type="primary"
                           icon="el-icon-upload2"
                           size="small"
                           plain
                           @click.stop="importExcelDialog">批量导入</el-button>
                <el-button type="primary"
                           icon="el-icon-sell"
                           size="small"
                           plain
                           @click.stop="rowLotDialog(1,scope.row)">提交申请</el-button>
                <el-button type="primary"
                           icon="el-icon-tickets"
                           size="small"
                           plain
                           @click.stop="rowLotDialog(2,scope.row)">我要复核</el-button>
                <el-button type="warning"
                           icon="el-icon-download"
                           size="small"
                           plain
                           @click.stop="exportExcel">导 出</el-button>
              </template>
              <template slot="menu" slot-scope="scope">    <!-- 卡槽menu模板是：表格内右侧边操作菜单栏按钮。  -->
                <el-button icon="el-icon-edit"
                           size="small" type="text"
                           @click.stop="rowUpdate(scope.row,scope.index)">编辑</el-button>
                <el-button icon="el-icon-delete"
                           size="small" type="text"
                           @click.stop="rowDel(scope.row,scope.index)">删除</el-button>
                <el-button icon="el-icon-sell"
                           size="small" type="text"
                           @click.stop="rowDialog(1,scope.row,scope.index)">提交</el-button>
                <el-button icon="el-icon-tickets"
                           size="small" type="text"
                           @click.stop="rowDialog(2,scope.row,scope.index)">复核</el-button>
                <el-dialog                  <!-- 使用element弹窗对话框方式，对提交操作按钮布局  -->
                  title="提交复核申请"       <!-- 弹窗标题  -->
                  :visible.sync="dialogFormVisibleSbumit"      <!-- 是否显示 Dialog，支持 .sync 修饰符  -->
                  width="40%"                   <!-- 弹出的对话框宽度  -->
                  append-to-body="true">        <!-- Dialog 自身是否插入至 body 元素上。嵌套的 D