> 文档中心 > 最详细的avue属性及使用详细介绍

最详细的avue属性及使用详细介绍


avue属性及使用详细介绍

官方文档

<template>  <basic-container>    <!-- 导出 -->    <avue-crud 设置表格属性      :option="option" 用来存取页面的值      v-model="form"      获取后台数据      :data="data"      :table-loading="loading"      分页      :page="page"      权限控制  操作按钮动态显示      :permission="permissionList"      打开前回调      :before-open="beforeOpen"关闭前回调      :before-close="beforeClose"获取dom 结构      ref="crud"数据编辑后出发      @row-update="rowUpdate"      新增数据确定后执行      @row-save="rowSave"      行删除      @row-del="rowDel"点击搜索后触发该事件      @search-change="searchChange"清空搜索回调方法      @search-reset="searchReset"      当选择项发生变化时会触发该事件      @selection-change="selectionChange"      @current-change="currentChange"      点击每页多少条      @size-change="sizeChange"      点击刷新      @refresh-change="onLoad(page)"      初始化页面      @on-load="onLoad"    >    自定义按钮      <template slot-scope="scope" slot="menu"> <el-button   @click="submitHandle(scope.row)">提交</el-button >      <template slot-scope="{ row }" slot="status"> <el-tag v-if="row.status == 0">待审</el-tag> <el-tag v-else-if="row.status == 1" type="info">审批中</el-tag>      </template>    </avue-crud>  </basic-container></template><script>export default {  data() {    return {      form: {},      type: "",      page: { pageSize: 10, currentPage: 1, total: 0,      },      selectionList: [],      option: {      //列的对其方式  align:'left',  //表格宽度  width: '100%',  //表格高度差(主要用于减去其他部分让表格高度自适应)  calcHeight: 'auto',  //表格高度  height: 'auto',  //表格最大高度 maxHeight: 'auto', // 弹框文字提示 tip: false, // 边框 border: true, // 显示序号 index: true, // 序号标题 indexLabel: "序号", //打印按钮 printBtn: true// 刷新按钮 refreshBtn: true // 查看按钮 viewBtn: true, // 行内编辑按钮 editBtn: false, // 行内删除 delBtn: false, //首次加载是否显示搜索 searchShow: true,  // selection: true, column: [   {     label: "请假人",      //匹配后端字段     prop: "userId",    //输入框状态控制 默认为input     type: "tree",//type:input/input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/password/switch/tree/numbermaxRows:4,//最大行(当type为textarea,当number时最大值)minRows:2,//最小行(当type为textarea,当number时最小值)     // 搜索栏目自定义内容 同时控制页面显示隐藏     search: true,      //表单编辑时是否禁止输入     editDisabled: true,      //表单新增时是否禁止输入     addDisabled: true,      //隐藏显示当前项     display: false,    // 表单新增是可见     addDisplay: false,      // 表单查看是否可见     viewDisplay: true,     // 编辑按钮是否可见     editDisplay: false,      // 隐藏列     hide: true,     //选着多个 当type为tree生效      multiple: true,     // 传入静态字典     dicData: [],     // 字典参数   props 匹配后台字段     props: {value: "sysId",label: "name",     },     //字典地址      dicUrl: "/api/blade-system/dict/dictionary?code=exam_state",     //验证     rules: [{  required: true,  message: "请选择请假人",  trigger: "blur",},     ],   },      data: []      };  },  mounted() {    // 当字典数据需要前端转换时   获取请假人id 通过接口 添加字典数据    personnel(1, 10000, {      is_deleted: 0,    }).then((res) => {      this.option.column.forEach((item) => { if (item.prop == "userId") {   item.dicData = res.data.data.records; }      });    });  },  methods: {  onLoad(page, params = {}) {      this.loading = true      getList( page.currentPage, page.pageSize, Object.assign(params, this.query)      ).then((res) => {      //渲染数据 const data = res.data.data; this.page.total = data.total; this.data = data.records; this.loading = false; this.selectionClear();      });    },  },};</script><style></style>