Crud自定义

自定义函数 #

//表格行格式,一般用于hightlight行数据
vapp.tableRowClassName=({row, rowIndex})=>{return 'classname';}
//表格行点击动作, 用于点击响应
vapp.handleRowClickChange=(row)=>{}
//自定义,一般用于自定义的操作
vapp.diyFun=(param)=>{}
//刷新表格
vapp.refreshTable();
//刷新过滤
vapp.data_filter();

自定义组件 #

<!--改写查询区域-->
{% block body_search %}
<div class="search_base_div"  v-if="searchHead" ><div class="search_div"><div style="display:flex;" v-if="startRender">{% include 'echart/part_search.html' %}</div></div></div>
{% endblock %}
<!--过滤区前端组件-->
{% block body_filter %}
<template v-if="!searchHead">{% include 'echart/part_search.html' %}</template>
{% endblock %}

<!--改写表格组件-->
{% block body_table %}{% endblock %}

<!--改写表格列 如多级表头-->
{% block body_table_columns %}
<el-table-column prop="date" label="日期" width="150"></el-table-column>
<el-table-column label="配送信息">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="地址">
        <el-table-column prop="province" label="省份"></el-table-column>
        <el-table-column prop="city" label="市区"></el-table-column>
    </el-table-column>
</el-table-column>
{% endblock %}

<!--自定义表格列-->
{% block body_table_column %}
<span v-else-if="item==='abc'">{[ scope.row[item]]}</span>
{% endblock %}

<!--自定义表格操作-->
{% block body_table_column_button %}
 <el-button type="text" size="mini" icon="el-icon-edit" @click.stop="diyfun(scope.row)"></el-button>
{% endblock %}

<!--自定义修改页面-->
{% block dialog_modify %}
<el-dialog :title="title" :visible.sync="dialogFormVisible">
 <el-form ref="form" :model="form" :rules="rules"></el-form>
</el-dialog>
{% endblock %}

<!--自定义审批修改页-->
{% block dialog_request %}
<el-dialog  :visible.sync="dialogFormVisible_r"></el-dialog>
{% endblock %}

<!--自定义查看页-->
{% block dialog_card %}
<el-dialog  :visible.sync="dialogTableVisible"></el-dialog>
{% endblock %}

自定义校验规则 #

vapp.rules = {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '用户名长度在3到15个字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', min: 1, max: 100, message: '年龄必须在1到100之间', trigger: 'blur' }
        ],
        email: [
          { message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        qty: [  
         {
             required: true,
             validator: (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请输入数量'));
                } else if (isNaN(value)) {
                callback(new Error('输入内容需为数字格式'));
                } else {
                callback();
                }
            },
            trigger: 'blur'
          }
         ],
     };

转化为组件 #

在模板中将 vapp.smtdrag=true; 并取消echarts引用的注释, 就可以把CRUD变成一个可拖拽的组件

自定义配置 #

你可以定义来指定那些配置不使用页面配置而采用个人定义,如: vapp.diyKeys=‘nameDict,optionDict’;