使用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）进入项目文件夹，执行如下两个命令安装相关的依赖包。

npm install --save-dev sass-loader
npm install --save-dev node-sass

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

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

<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" }] //表单校验规则
    }
}