avue属性详解和使用介绍

官方文档：https://www.avuejs.com/form/form.html

 

<template>
<!-- 基础组件 -->
  <basic-container>
    <!-- <el-button @click='exportHandle'>导出</el-button> -->
    <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/number
maxRows: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",
             //时间格式
               format: "yyyy-MM-dd hh:mm:ss",
               valueFormat: "yyyy-MM-dd hh:mm:ss",
            //验证
            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>