avue-增删改查综合

原创

于 2024-04-09 13:30:20 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

<template>
  <div id="my-component">
   <avue-crud :data="data" :option="option"
              @row-save="rowSave" @refresh-change="refreshChange"
   @row-del="rowDel" @row-update="rowUpdate">
   </avue-crud>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          id:1,
          name:'张三',
          sex:'男'
        }, {
          id:2,
          name:'李四',
          sex:'女'
        },{
          id:3,
          name:'路人甲',
          sex:'女'
        }
      ],
      option:{
        searchBtn:true,
        delBtn:true,
        column:[
          {
            label:'姓名',
            prop:'name'
          }, {
            label:'性别',
            prop:'sex'
          }
        ]
      },
    };
  },
  methods: {
    refreshChange(){
      this.$mess