博客

<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>