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 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: {
      searchSpan: 8,   搜索框的宽度
        // 弹框文字提示
        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",
            // 搜索栏目自定义内容 同时控制页面显示隐藏
            search: true,
             //表单编辑时是否禁止输入
            editDisabled: true, 
            //表单新增时是否禁止输入
            addDisabled: true, 
            //隐藏显示当前项
            display: false,
           // 表单新增是可见
            addDisplay: false,
             // 表单查看是否可见
            viewDisplay: true,
            // 编辑按钮是否可见
            editDisplay: false,
             // 隐藏列
            hide: true,
            //选着多个
             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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168