自定义函数 #
//表格行格式,一般用于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’;