avue的CRUD属性介绍

最新推荐文章于 2024-08-23 11:07:06 发布

LYK_HAHA

最新推荐文章于 2024-08-23 11:07:06 发布

阅读量1.6k

点赞数

分类专栏： vue 文章标签： html

本文链接：https://blog.csdn.net/weixin_45023621/article/details/120622891

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该博客展示了如何在Vue项目中利用Avue组件库创建数据表格，并配置CRUD操作，包括表格数据绑定、表单编辑、搜索功能以及列的自定义设置。示例代码详细展示了新增、编辑、删除按钮的禁用以及列的隐藏等配置。

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

<avue-crud :data="data" :option="option" v-model="form"></avue-crud>

<script>
export default {
 data() {
      return {
        form:{},//新增修改时绑定的表单
        data: [	//表格显示的数据
          {
            name:'张三',
            sex:'男'
          }, {
            name:'李四',
            sex:'女'
          }, {
            name:'王五',
            sex:'女'
          }, {
            name:'赵六',
            sex:'男'
          }
        ],
        option:{	//CRUD主键的格式
          align:'center',//文本居中
          menuAlign:'center',//操作栏居中
          index:true,//开启表格索引
          indexLabel:'序号',//索引表头
          viewBtn: false,//详情按钮
          editBtn: false,//编辑按钮
          delBtn: false,//删除按钮
          addBtn: false,//新增按钮
          column:[
             {
              label:'姓名',
              prop:'name',
              search:true,	//search设置为true开启字段的搜索
              order:1,//设置表格显示顺序
              sortable:true,//开启表格排序
              searchSpan:6,//搜索框的宽度
              type: "text",//搜索类型（text文本，tree可搜索的选项,select下拉框，date时间……）
              formslot: true,//开启自定义表单格式
               hide: true,//隐藏列
               searchOrder: 1,//搜索栏的顺序
            },
            {
              label:'性别',
              prop:'sex'
            }
          ]
        }
      }
    }
  }
</script>