Vue使用avue-crud表格组件的用法及参数说明（超详细）

前端李太白

已于 2023-11-08 09:14:38 修改

阅读量1.5w

点赞数 7

文章标签： vue.js javascript 前端

于 2023-05-25 13:43:38 首次发布

本文链接：https://blog.csdn.net/weixin_56740218/article/details/130863129

版权

一、安装

通过 npm 安装

在现有项目中使用 Avue 时，可以通过 npm 或 yarn 进行安装(需要先引入ElementUI作为依赖支持)：

npm i @smallwei/avue -S
yarn add @smallwei/avue -S

//需要先安装ElementUI的依赖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(ElementUI)
Vue.use(Avue);

使用字典需要引入axios

import axios from 'axios'
Vue.use(Avue,{axios})

//老版本需要使用如下
//main.js
window.axios = axios

通过脚手架安装

在新项目中使用 Avue 时，推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目并安装 Avue

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

在图形化界面中，点击 依赖 -> 安装依赖，然后将 @smallwei/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:'取消文案',
          //弹框宽度控制
           dialogWidth: 600,
        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>

三、全局api

1.$DialogForm弹窗表单

this.$DialogForm.show({
  title: '弹窗页面',
  width: '30%',
  menuPosition:'right',
  option:{
    submitText: '完成',
    span:24,
    column: [{
      label: "姓名",
      prop: "name",
      rules: [{
        required: true,
        message: "请输入姓名",
        trigger: "blur"
      }],
    }]
  },
  beforeClose: (done) => {
    this.$message.success('关闭前方法')
    done()
  },
  callback:(res)=>{
    console.log(res.data);
    this.$message.success('关闭等待框')
    setTimeout(() => {
      res.done()
      setTimeout(() => {
        this.$message.success('关闭弹窗')
        res.close()
      }, 1000)
    }, 1000)
  }
})

2.$Clipboard复制到剪切板

 this.$Clipboard({
    text: '复制的文本内容'
  }).then(() => {
    this.$message.success('复制成功')
  }).catch(() => {
    this.$message.error('复制失败')
  });

3.$ImagePreview图片预览

 data() {
    var link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
    return {
      datas: [
        { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
        { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
        { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
      ]
    }
  }
 this.$ImagePreview(this.datas, index);

3.$Print 打印插件

  <div id="test"></div>
  this.$Print('#test')

4.$Export excel导出

 let opt = {
    title: '文档标题',
    column: [{
      label: '标题',
      prop: 'title'
    }],
    data: [{
      title: "测试数据1"
    }, {
      title: "测试数据2"
    }]
  }
  this.$Export.excel({
    title: opt.title || new Date().getTime(),
    columns: opt.column,
    data: opt.data
  });

5.$Log日志打印

/**
* 内置5中常用颜色,默认为primary
* default:#35495E
* primary:#3488ff
* success:#43B883
* warning:#e6a23c
* danger:#f56c6c
* 也可以直接打印彩色文字
*/

this.$Log.capsule('标题','内容','primary')
this.$Log.primary('内容')

6.findObject发现结构对象

  var option = {column:[]}
  var prop = this.findObject(option.column,'prop');
  console.log(prop)//操作对象

7.watermark全局水印

  this.watermark({
    fontSize: '14px', 
    width: '100', 
    height: '80', 
    text: 'avue局部水印'
  });

8.downFile文件下载

  var url = "https://avuejs.com/images/logo-bg.jpg";
  this.downFile(url,'logo.jpg');

9.randomId随机数生成

  var str = this.randomId();
  console.log(str)

10.loadScript动态加载js/css

  this.loadScript('js','xxx.js').then(()=>{
    //执行后的方法
  })
  this.loadScript('css','xxx.css').then(()=>{
    //执行后的方法
  })

11.deepClone对象深拷贝

  var obj1 = {
    name:'张三'
  }
  var obj2 = this.deepClone(obj1);

12.setPx设置css像素方法

  var obj = 23
  console.log(this.setPx(obj)) //'23px'
  console.log(this.setPx('100%')) //'100%'
  console.log(this.setPx('23px')) //'23px'

13.validatenull判断空

  var obj1 = {}
  var obj2 = []
  var str1 = ''
  var str2 = undefined
  var str3 = null;
  console.log(this.validatenull(obj1)) //true
  console.log(this.validatenull(obj2)) //true
  console.log(this.validatenull(str1)) //true
  console.log(this.validatenull(str2)) //true
  console.log(this.validatenull(str3)) //true

14.findNode数组中寻找对象下标

  var list = [{
    prop:'name'
  },{
    prop:'sex'
  }]
  var obj = this.findNode(list,'sex','prop');
  console.log(obj) //{prop:'sex'}

15.vaildData验证对象

  var obj = {}
  console.log(this.vaildData(obj,'默认值')) //默认值
  console.log(this.vaildData(obj,{name:11})) //{name:11}
  var obj2 = true
  console.log(this.vaildData(obj2,false)) //true

16.表格合计

//option中设置显示汇总信息

option：{
    showSummary:true,
}

//avue-crud标签中绑定计算方法  :summary-method="getSummaries"

<avue-crud ref="crud" :page="page" :data="dataList" :option="option" @search-change="searchChange"  @on-load="getDataList" @refresh-change="getDataList"
 :summary-method="getSummaries">
</avue-crud>


//methods调用合计方法

getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        //指定----求和，其余列均不求和
        if (column.property == 'id' || column.property == 'name') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);//转变为数字类型
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index];
        } else {
          sums[index] = '-';//不汇总列加-
        }
      });
      return sums;
    },

点击跳转Avue官方文档，查看更多详细内容。如有其他疑问可在评论区留言...

感觉还可以的请点赞、收藏、关注，谢谢您的观看