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

一、安装

通过 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 添加到依赖中即可。

 二、使用

三、全局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 打印插件

  

  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

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

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