vue开发流程记录

在已有的一个页面中增加一个树形结构，考虑到原页面过于庞大（历史问题），新增一个vue子页面，采用 element-ui tree组件。

1. 定义一个el-tree基本结构

<el-tree
    //注册一个引用对象
    ref = "tree"
    //绑定对象数据
    :data = "data"
    //此处主要使用disabled做禁用处理
    :props = "defaultProps"
    //展示复选款
    show-checkbox
    //去除父子关系，为true时（即勾选子级数据时，父级不做勾选处理）
    :check-strictly = "checkStrictly"
    //默认选中的节点信息（将选中的节点的code，维护一个数组）
    :default-checked-keys = "defaultcheckedkeys"
    //默认展开节点信息（将选中的节点的code，维护一个数组）
    :default-expanded-keys = "defaultexpandedkeys"
    node-key="id">
</el-tree>

2. 定义第一步需要用到的数据，因为是动态的，所以默认为空处理。

• check-strictly：复选框在显示时，是否严格遵守父子互相关联的做法
  ：false（默认），父子关联，即点击子节点时，父节点也会勾选，勾选父节点，子节点全部勾选；
  ：ture，父子不互相关联，勾选子节点、父节点不影响。

data() {
      return {
        data: [],
        delayer: [],
        defaultProps: {
          children: 'children',
          label: 'label',
          disabled: this.disabledJudge
        },
        //默认勾选节点
        defaultcheckedkeys: [],
        //默认展开勾选节点树
        defaultexpandedkeys: [],
        dialogVisible: true,
        //父子节点关系，true表示无关系
        checkStrictly: true,
        seedisabledbtn: true
      };
    }

3.由于是后台获取数据，在api中定义请求方法，在当前vue文件中引入

//api文件中，定义请求方法，入参，url，method等等
export function method(data) {
    return request({
        url: '/path',
        method: 'post',
        data: data
    })
}
//vue文件中引入
import {
  getAllLowerCompanyNew
} from "@/api/policyapi";

4. 后端响应数据，与el-tree层级不一致，需要做额外的处理

//将响应数据按照el-tree的格式处理
for (var i=0; i<data.length; i++) {
  this.delayer.push({
    id: data[i].comCode,
    label: data[i].comCName,
    pid: data[i].upperComCode
  });
}
let cloneData = JSON.parse(JSON.stringify(this.delayer));
console.log(cloneData);
this.data = cloneData.filter(father => {
  //通过filter获取当前元素的下级元素
  let branchArr = cloneData.filter(child => father.id == child.pid);
  // 如果存在子级，则给父级添加一个children属性，并赋值
  branchArr.length > 0 ? father.children = branchArr : father.children = [];
  //最终返回的是最顶级节点，如顶层Id为 1，topCode为1即可
  return father.id == topCode;
})

5. 由于是新增页面，因此还需要再父子页面之间进行数据交互；

• 父页面获取子页面el-tree的值，通过ref调用了子页面的一个方法，进行了返回（方法应该不是很好）：
  var checkedKeys = this.$refs.protocalAuth.protocalSave();

//父页面
//向子页面传输 info1,info2,editType，并将子页面通过ref注册进去，
<protocolAuthView ref="protocalAuth" 
        :info1=data.info1
        :info2=data.info2
        :editType=data.editType
</protocolAuthView>
//子页面，通过props接收传送的值
props: ['permitComCode', 'editType', 'comCode'],

6. 在测试el-tree 默认选中、展开的时候，存在一些数据情况，没有生效，加了一些watch进行监听

watch:{
      permitComCode(val, oldVal){
        console.log("新值" + val + ", 老值" + oldVal);
        if(val != undefined) {
          var editType = this.editType;
          //copy和type，不进行数据展示
          if (editType != ":type" && editType != "copy") {
            this.defaultcheckedkeys = val.split(",");
            this.defaultexpandedkeys = val.split(",");
          }
        }
      }
    }

记录一下简单的vue前端开发流程。