vue前端的avue-crud操作

 

1、在js中获取某个字段的属性，或设置字段的值：

const column = this.findObject(this.option.column, "parentId");
          column.disabled = true;//设置为禁用此字段
          column.value = '1'; //设置parentId字段的value值
          console.log("column属性：", column);

 

2、通过接口初始化下拉框的数据：

initData() { //初始方法
        getCloumnAllTree().then(res => { //接口请求拿到数据，渲染给parentId下拉框字段
          // console.log("栏目下拉tree", res.data);
          const column = this.findObject(this.option.column, "parentId");
          column.dicData = res.data.data;
        });
      },

 

 3、avue-crud表格为tree树形结构，添加或编辑，删除子节点时，刷新节点数据列表：

如图：

 关键代码：

//模板tree点击查子tree方法
      treeLoad(tree, treeNode, resolve) {
        // alert(tree.id);
        const id = tree.id;
        this.maps.set(id, {tree, treeNode, resolve});//将当前选中节点存储到maps中，刷新时会用到

        lazyCloumnList(tree.id).then((res) => {
          // console.log("懒加载，", res.data);
          resolve(res.data.data);
        });
      },

//新增、修改、删除完成后，调用此方法实现刷新节点
refreshMaps(){
        //懒加载局部刷新
        this.maps.forEach((item, key) =>{
          const{tree, treeNode, resolve} = this.maps.get(key);
          this.treeLoad(tree, treeNode, resolve);
        })
      },


//新增保存
addSave(){

     //。。。保存成功

    //tree懒加载局部刷新
    this.refreshMaps();

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

。