Avue表格应用自定义

小咪咪 2021-07-27 00:22 687阅读 0赞

官方地址:[https://avuejs.com/doc/crud/crud-doc][https_avuejs.com_doc_crud_crud-doc]

首先要知道avue是在element-ui的基础上做的二次封装所以element里的所有东西avue都支持

先上图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70][]

上代码:html

<avue-crud :data="data" :option="option" v-model="obj" :before-close="beforeOpen">
      
     <template slot="name" slot-scope="scope" >
        <el-tag></el-tag>
      </template>
        
      <template slot-scope="scope" slot="nameForm">
          <el-tag></el-tag>
      </template>
        
        <template slot="menuLeft">
            <el-button type="primary" size="small">自定义按钮</el-button>
        </template>
        <template slot="menuRight">
            <el-button type="primary" icon="el-icon-edit" circle size="small"></el-button>
        </template>
         
        <template slot-scope="scope" slot="menu">
         <el-button icon="el-icon-check" size="small">自定义菜单按钮</el-button>
      </template>
    </avue-crud>

data() {
          return {
            obj:{},
            data: [
              {
                name:'张三',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }, {
                name:'李四',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'王五',
                sex:'女',
                date:'1994-02-23 00:00:00'
              }, {
                name:'赵六',
                sex:'男',
                date:'1994-02-23 00:00:00'
              }
            ],
             // 表格配置
            option:{
              title:'表格的标题',
              align:'center',  // 表格列齐方式
              menuAlign:'center', // 菜单栏对齐方式
              columnBtn:false, //列动态显隐按钮
              refreshBtn:false, // 刷新按钮
              saveBtn:false, // 保存按钮;
              updateBtn:false, // 更新按钮
              cancelBtn:false, // 行编辑取消按钮
              addBtn:false, // 表格新增按钮
              delBtn:false, // 行删除按钮
              editBtn:false, // 行编辑按钮
              column:[
                 {
                  label:'姓名',
                  prop:'name',
                  slot:true, // 自定义列
                  formslot:true // 自定义表单
                },
                {
                  label:'性别',
                  prop:'sex'
                },{
                  label: "日期",
                  prop: "date",
                  type: "date",
                  format: "yyyy-MM-dd hh:mm:ss",
                  valueFormat: "yyyy-MM-dd hh:mm:ss",
                }
              ]
            }
          }
        }

不一一写了

[https_avuejs.com_doc_crud_crud-doc]: https://avuejs.com/doc/crud/crud-doc
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDQzMzc3_size_16_color_FFFFFF_t_70]: /images/20210726/78f2309c28d24aacb7ba2c03cf8dce89.png