Avue表格應用自定義

官方地址:https://avuejs.com/doc/crud/crud-doc

首先要知道avue是在element-ui的基礎上做的二次封裝所以element裏的所有東西avue都支持

先上圖

上代碼: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>
    <!-- 自定義菜單 配置slot卡槽爲menuLeft爲表單菜單左邊位置,卡槽爲menuRight爲表格菜單右邊的位置-->
    <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>

js

 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",
            }
          ]
        }
      }
    }

不一一寫了