关于avue的那些事——修改对象属性

“前端搬砖神器,让数据驱动视图,更加贴合企业开发”——avue官网。

最近做的项目用的是avue组件，这个基于element-ui库二次封装的组件库，看似功能强大，但是对于像我这样的小白来说还是有点难用的。

先说需求：
通过选择radio单选框控制表单其他行的显隐，如图

需求不难，正常来说，用v-if来进行判断即可，但是avue是基于element进行二次封装的，有些东西封装起来了你就不知道怎么去弄出来了。在avue里表格以及按钮都封装在对应的js文件里。

<avue-crud ref="crud"
                       :page="page"
                       :data="tableData"
                       :permission="permissionList"
                       :table-loading="tableLoading"
                       :option="tableOption"
                       v-model="form"
                       @on-load="getPage"
                       @refresh-change="refreshChange"
                       @row-update="handleUpdate"
                       @row-save="handleSave"
                       @row-del="handleDel"
                       @sort-change="sortChange"
                       @search-change="searchChange">
</avue-crud>

类似于这样

export const tableOption = {
    
    
  dialogDrag: true,
  border: true,
  indexLabel: '序号',
  stripe: true,
  menuAlign: 'center',
  align: 'center',
  menuType: 'text',
  searchShow: false,
  excelBtn: true,
  printBtn: true,
  viewBtn: true,
  searchMenuSpan: 6,
  column: []
}

所以不能像在element-ui那样去使用，这个时候就要去看官方文档。

按着文档来做就可以实现上面的需求，
需要注意的点：
在avue组件上绑定好:defaults.sync=“defaults”。