使用Avue的方法

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	npm install --save-dev sass-loader npm install --save-dev node-sass

（2）接着编辑 build 文件夹下的 webpack.base.conf.js 文件，在 rules 里面添加如下配置：

1 2 3 4

{   test: /\.sass$/,   loaders: ['style', 'css', 'sass'] }

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. 搜索自定义

 

子定义操作按钮
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" }] //表单校验规则
    }
}