avue开发小结 以及一些参数作用

avue开发小结

【简介】

Avue 是一个采用Element框架低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率

官网地址：https://avuejs.com/

github地址：https://github.com/nmxiaowei/avue

---

安装和引用参考官网，此处记录使用avue-crud组件开发的一些参数配置（欢迎补充）

本文参考原文链接：https://blog.csdn.net/u014635374/article/details/115357983

<avue-crud>
    :option="option"   // 表格配置属性
    :table-loading="loading"  // 表格等待框的控制，加载时转圈，true/false
    :search.sync="search"  // 搜索的变量(需要sync修饰符)
    :visible.sync="changeInfo"  // 是否显示 true/false
    :data="data"  // 表格显示数据
    :page.sync="page"  // 表格分页配置选项(需要sync修饰符)
    :permission="permissionList"  // 权限控制
    :before-open="beforeOpen"  // 打开前的回调function(file,column)
    v-model="form"  // 数据模型 用来存取页面的值
    ref="crud"  // 在普通DOM元素上使用，引用指向的就是DOM元素
    @cell-click="pageto"  // 表格点击运行方法onclick 方法定义
    @row-update="rowUpdate"
    @row-save="rowSave"  // 新增数据点击运行方法 onclick方法定义
    @row-del="rowDel"  // 行数据删除时触发该事件
    @row-click="handleRowClick"  // 单击行运行的方法
    @search-change="searchChange"
    @search-rest="searchRest"
    @selection-change="selectionChange"
    @current-change="currentChange"  // 点击页面会触发
    @size-change="sizeChange"  // 点击每页多少条会触发
    @refresh-change="refreshChange"  // 点击刷新按钮触发
    @on-load="onLoad" >  // 打开表格页的方法，一般用来初始化、返回页面数据
    <template slot="status" slot-scope="scope">
      <span v-show="scope.row.status == 1" class="label label-success">RUNNING</span>
      <span v-show="scope.row.status != 1" class="label label-default">STOP</span>
    </template>
    <!-- 自定义搜索 -->
    <template slot="search" slot-scope="scope">
      <el-form-item lable="执行器" label-width="90px">
        <el-select v-model="jpbGroup" placeholder="请选择执行器" @change="jobGroupChange">
          <el-option
            v-for="item in groupList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </template>
    <!-- 自定按钮 表格顶部 -->
    <template slot="menuLeft" slot-scope="scope">
      <el-button type="primary" icon="el-icon-plus" size="small" plain @click.stop="handleAdd(scope.row)">心中</el-button>
    </template>
    <!-- 自定义按钮 表格操作栏 -->
    <template slot="menu" slot-scope="scope">
      <el-dropdown-item divided @click.native="handleDel(scope.row)">删除</el-dropdown-item>
    </template>
    <template slot="menuBtn" slot-scope="scope">
      <el-dropdown-item divided @click.native="handleEdit(scope.row)">编辑</el-dropdown-item>
      <el-dropdown-item divided @click.native="handleCopy(scope.row)">复制</el-dropdown-item>
      <el-dropdown-item divided @click.native="handleStart(scope.row)">启动</el-dropdown-item>
    </template>
    <!--  自定义表单项  -->
    <template solot="wayForm" slot-scope="scope">
      <el-input placeholder="请输入地址" v-model="form.way"/>
    </template>
</avue-crud>

---

computed: {
  ...mapGetters(['permissions']),
  permissionList() {
    return {
      addBtn: this.vaildData(this.permissions.metadata_mdrelation_add, false),
      delBtn: this.vaildData(this.permissions.metadata_mdrelation_del, false),
      editBtn: this.vaildData(this.permissions.metadata_mdrelation_edit, false),
      menu: this.checkObj(this.is_show)  // 是否显示menu菜单
    };
  }
}

---

const validateEmail = (rule, value, callback) => {
  let isEmail(s) {
    return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
  }
  if (isEmail(value)) {
    callback()
  } else {
    callback(new Error('请输入正确格式的邮箱'))
  }
}

export const option = {
    height: 'auto',  // 表格高度
    calcHeight: 20,  // 表格高度差（主要用于减去其他部分让表格高度自适应）
    tip: false,
    searchShow: true,  // 首次加载是否显示搜索
    searchMenuSpan: 4,  // 搜索按钮长度
    searchSpan: 6,  // 搜索框长度 最大长度24
    border: true,  // 表格边框是否显示
    index: true,  // 是否显示序号
    indexLabel: '序号',
    viewBtn: true,  // 是否显示查看按钮
    editBtn: true,  // 是否显示编辑按钮
    delBtn: false,  // 是否显示删除按钮
    excelBtn: false,  // 是否显示表格导出按钮
    labelWidth: 120,  // 表格前面的标题长度
    refreshBtn: false,  // 表格上小刷新按钮
    columnBtn: false,  // 表格上小列表按钮
    searchBtn: false,  // 表格上小搜索按钮
    selection: true,  // 表格前面勾选
    menu: true,  // 是否显示操作栏
    // 'menuType': 'menu',  // 自定义表格操作栏
    // 'menuBtnTitle': '操作',  // 自定义表格操作栏按钮组的名称
    menuWidth: 120, // 操作栏宽度
    column: [
        {
            label: '所在地址',
            props: 'way',
            type: 'input',  //输入框类型
            align: 'center',  // 对其方式
            sortable: true,  // 是否排序
            border: true,
            overHidden: true,
            row: true,
            width: 120,
            span: 24,  // 24最大长度
            addDisplay: false,  // 新增时是否显示
            editDisplay: false,  // 编辑时是否显示
            viewDisplay: true,  // 详情时是否显示
            hide: true,  // 表单查询时是否显示
            display: false,  // 在查看、新增、编辑页是否显示
            dicData: [  // type是select时下拉数据
              {label: '合肥', value: 1001},
              {label: '成都', value: 1002}
            ],
            dicUrl: '/xxl/jobgroup/pageList',  // 通过接口查询搜索项
            props: {label: 'title', value: 'id'},  // 选项配置
            rules: [
              {required: true, message:'请选择地址', trigger: 'blur'}
            ],
            addDisabled: true,  // 添加时不能修改
            editDisabled: false,  // 编辑时不能修改
            sortable: true,  // 排序方式切换、倒叙、正序切换
            formatter: (row, column, cellValue, index) => {
              return [row.startTime, row.endTime]
            },
            formslot: true,  // 加一个插槽 子表可以放这里
            append: '元',  // type为input时生效
        }, {
            type: 'select',
            label: '状态',
            props: 'status',
            search: true,
            display: false,
            value: 0,
            dicData: [
              {label: '全部', value: '-1'},
              {label: '停止', value: '0'},
              {label: '启动', value: '1'}
            ],
            slot: true  // 自定义表格列
        }, {
          label: '邮箱',
          prop: 'email',
          value: '',
          span: 24,
          rules: [
            {
              validator: validateEmail,
              message: '请输入正确格式的邮箱',
              trigger: 'blur'
            },
            {required: true, message: '请输入邮箱', trigger: 'blur'}
          ],
        }
    ]
}

开发中可能还会存在的问题，待记录

• 级联选择
• 列数据之间控制显示