Avue属性及使用详细介绍

<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>
      <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, 
          editBtnText:'编辑文案',
          viewBtnText:'查看文案',
          printBtnText:'打印文案',
          excelBtnText:'导出文案',
          updateBtnText:'修改文案',
          saveBtnText:'保存文案',
          cancelBtnText:'取消文案',
        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;
       
      });
    },
  },
};
</script>

<style>
</style>
转载
原文链接：https://blog.csdn.net/xiaosi1413/article/details/117462451

option: {
          labelWidth： 20, //标签宽度
          gutter: 132, //间距
          card: true, //是否列表公用
          tabs: true, //开启选项卡
          tabsActive: 3, //选项卡个数
          emptyBtn: true, //是否显示清空按钮，默认true
          submitBtn: true, //是否显示提交按钮，默认true
          mockBtn: true, //是否开启模拟按钮，默认false
          submitText: '完成', //提交按钮文本
          addBtn: true, //添加按钮
          menuWidth:100,//按钮宽度
          menuAlign:'center',//按钮位置
          menuHeaderAlign:'center',//头位置
          viewBtn:true,//查看
          editBtn:false,//编辑
          delBtn:false,//删除
            copyBtn:true,//复制
          group: [{
            icon: 'el-icon-info',
            label: '分组1',
            collapse: false,
            prop: 'group1',
            column: [{
              label: '内容1',
              prop: 'text1',
            }]
          }, {
            icon: 'el-icon-info',
            label: '分组2',
            arrow: false,
            prop: 'group2',
            column: [{
              label: '选项卡2',
              prop: 'text2',
            }, {
              label: '选项卡3',
              prop: 'text3',
            }]
          }], //分组显示
          column: [{
            label: "用户名", //标签名称
            prop: "username", //值
            tip: '这是信息提示', //内容提示
            tipPlacement: 'left', //内容提示语位置
            labelTip: '我是一个标题提示语', //标签提示语
            labelTipPlacement: 'right', //标签提示语位置
            maxlength: 3, //最长
            suffixIcon: 'el-icon-tickets', //后图标
            prefixIcon: 'el-icon-tickets', //前图标
            format: 'yyyy-MM-dd', //时间显示格式化
            valueFormat: 'yyyy-MM-dd', //返回值时间格式化
            startPlaceholder: '时间日期开始范围自定义',
            endPlaceholder: '时间日期结束范围自定义',
            minlength: 2, //最短
            row: true, //独占一行
            prepend: 'http://', //后缀
            append: 'com', //前置，
            minRows: 8, //文本框最小行
            maxRows: 10, //文本框最大行
            showWordLimit: true, //显示剩余多少长度
            step: 2, //增加步数
            stepStrictly: true, //严格步数
            precision: 2, //小数点精度
            controlsPosition: '', //步数增加按钮位置
            labelPosition: 'top', //标签位置
            dataType: 'number', //数据类型
            span: 24, //宽度

            className: 'formClassName', //样式
            value: '默认值', //默认值
            type: "cascader", //input类型select下拉、cascade级联、tree树
            multiple;true, //是否可以选择多个，和select一起使用
            drag: true, //是否可以拖拽select中的结果类容
            all: true, //多选框时，是否全选
            border: true, //空心多选框
            min: 1, //限制选择数量
            max: 2,
            button: true, //按钮类型多选框
            dicData: {
              label: '有权限',
              value: 1
            },
            {
              label: '无权限',
              value: 0
            },
            {
              label: '禁止项',
              disabled: true, //禁止字典选择
              value: -1
            }, //数据字典
            dicUrl: `${baseUrl}/getProvince`, //网络字典URL
            dicFormatter: (data) => {
              data.forEach(ele => {
                ele.name = ele.name + '字典格式化'
              })
              data.unshift({
                name: '追加字典',
                code: -1
              })
              return data
            }, //字典格式化
            dicData: [{
                label: '热门城市',
                groups: [{
                  value: 'Shanghai',
                  label: '上海',
                  desc: '描述'
                }, {
                  value: 'Beijing',
                  label: '北京'
                }]
              }, //字典分组     props: {
              label: 'name',
              value: 'code'
            }, //指明字典数据对应关系
            validator: validatePass, //开启自定义校验，值为一个函数
            bind: 'deep.deep.deep.value', //数据双向绑定
            order: 1, //字段排序，降序排列
            component: 'elDivider', //组件名字
            event: {
              click: () => {
                this.$message.success('点击方法')
              },
            }, //点击方法
            params: {
              html: '<h2 style="color:red">自定义html标签,点我触发方法</h2>',
              contentPosition: "left",
            }, //组件参数
            change: ({
              value,
              column
            }) => {
              this.$message.success('change事件查看控制台')
              console.log('值改变', value, column)
            },
            click,
            focus,
            blur, //事件函数
            errorslot: true, //错误自定义卡槽
            labelslot: true, //标签自定义卡槽
            formslot: true, //内容自定义卡槽
            rules: [{ //校验
              required: true, //是否必须
              type: 'array', //数据类型
              message: "请输入用户名", //提示
              trigger: "blur", //出发事件
            }]
          }]
        }
      }
————————————————
转载
原文链接：https://blog.csdn.net/qq_44872773/article/details/124286707