1. yarn add element
2. 安装Aue
在Plugins中建立Avue.js
npm i @smallwei/avue -S
import Avue from '@smallwei/avue';
import '@smallwei/avue/lib/index.css';
Vue.use(Avue);
2. Vue.js - 在项目中使用Sass、SCSS的方法(安装sass-loader)
默认情况下 Vue.js 是不支持 Sass、SCSS 的,如果想要使用它们,只需要一些简单的安装配置即可。
1,安装依赖包
(1)进入项目文件夹,执行如下两个命令安装相关的依赖包。
1 2 |
|
(2)接着编辑 build 文件夹下的 webpack.base.conf.js 文件,在 rules 里面添加如下配置:
1 2 3 4 |
|
4. 事件:
https://avuejs.com/doc/crud/crud-doc
Events
事件名 | 说明 | 参数 |
---|---|---|
current-change | 切换页面时触发该事件 | page |
current-row-change | 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的highlightCurrentRow属性为true | currentRow,oldCurrentRow |
select | 单个选择回调 | selection, row |
selectAll | 勾选全选 | selection |
date-change | 表格日期回调方法 | date |
filter-change | 过滤回调函数 | params |
cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event |
cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event |
row-update | 编辑数据后确定触发该事件 | row,index,done,loading |
row-save | 新增数据后点击确定触发该事件 | row,done,loading |
row-del | 行数据删除时触发该事件 | row,index |
row-click | 当某一行被点击时会触发该事件 | row,event,column |
row-dblclick | 当某一行被双击时会触发该事件 | row,column |
refresh-change | 点击刷新按钮触发该事件 | page |
size-change | 页面每页显示的条数触发该事件 | pageSize |
sort-change | 调用排序后触发该事件 | list |
search-change | 点击搜索后触发该事件 | params,done |
search-reset | 清空搜索回调方法 | - |
selection-change | 当选择项发生变化时会触发该事件 | selection |
toggleRowExpansion | 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开 | row, expanded
|
6. 分页
{ "total": 200, "pagerCount": 5, "currentPage": 1, "pageSize": 20, "pageSizes": [ 10, 20, 30, 40, 50, 100 ], "background": true }
7. 搜索自定义
<avue-crud :option="option" :data="data" @search-change="searchChange">
<template slot-scope="scope" slot="sexSearch">
<el-tag>自定义搜索内容</el-tag>
</template>
<template slot="searchMenu">
<el-button size="small">自定义按钮</el-button>
</template>
</avue-crud>
<script>
export default {
data(){
return {
data:[{
name:'张三',
sex:18,
}],
option:{
column: [{
label: '姓名',
prop: 'name',
search:true,
},{
label: '年龄',
prop: 'sex',
searchslot:true,
search:true,
}]
}
}
},
methods:{
searchChange(params,done) {
done();
this.$message.success(JSON.stringify(params))
},
}
}
</script>
子定义操作按钮
js自动配置crud
{
border: true,//表格是否显示边框
index: true,///表格是否显示序号
selection: true,//表格是否显示可选select
dic:['GRADE','SEX'],//传入需要获取字典的变量,看vuex中的getDic方法
column: [
{
label: "用户名",//表格的标题
prop: "username",//表格的key
width: "150",//表格的宽度
fixed: true,//是否冻结列
hide:true,//是否隐藏
type:'select', //select | radio | checkbox | date 默认为text
visdiplay:true,//表单不显示
overHidden: true,//超出省略号显示
dicData: 'GRADE', //传入需要引用的字典
],//type的数据字典,当type为:select | radio | checkbox 加载
dataDetail: val => {
return ``;;//是否对列表数据处理
},
rules: [{ required: true, message: "请输入用户名", trigger: "blur" }] //表单校验规则
}
}