前端那些事20240201-前端那些事-avue2 自定义新增按钮

最新推荐文章于 2024-04-29 12:02:14 发布

前端歌谣

最新推荐文章于 2024-04-29 12:02:14 发布

阅读量543

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/qq_41632427/article/details/135979858

版权

2024-vue2vue3-前端那些事专栏收录该内容

312 篇文章 1 订阅

订阅专栏

这篇文章介绍了如何在Vue.js应用中使用avue-crud组件来创建和管理表格数据，包括新增按钮的添加以及数据结构的定义。

摘要由CSDN通过智能技术生成

<avue-crud :data="data" :option="option" ref="crud">
  <template slot-scope="scope" slot="menuLeft">
    <el-button type="danger"
      icon="el-icon-plus"
      size="small"
      @click="$refs.crud.rowAdd()">新增</el-button>
  </template>
</avue-crud>

<script>
export default {
    data() {
      return {
        data: [
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }
        ],
        option:{
          addBtn:false,
          column:[
             {
              label:'姓名',
              prop:'name'
            }, {
              label:'性别',
              prop:'sex'
            }
          ]
        },
      };
    }
}
</script>