VUE项目bug总结

1.Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'xxx')

当遇到这种错误时一般有两种情况，一种就是你没有定义该变量在data中。

还有一种就是就是我的情况，这里先上代码

       response.data.forEach(function (item,index){
          this.list.push({
            label:item,
            value:item
          })
        })

这种情况识别不到this.list变量，可以用let that=this或者

response.data.forEach((item)=>{
     this.schemaList.push({
     label:item.table_schema,
     value:item.table_schema
     })
})
或
  for (let i = 0; i < response.data.length; i++) {
          this.schemaList.push({
            label:response.data[i].table_schema,
            value:response.data[i].table_schema
          })
    }

注意：这里的数组一定要用push，千万别用list[index]=.....,经本人实验，这种方法初始化页面识别不到（数据倒是有）。

2.子传父

我比较喜欢用的是在父组件的子组件上定义一个@change=“change”，然后在父组件上定义一个change方法（在method中），然后在子组件传值。

父组件
<FileTree
     :rawData="treeData"
     @changeData="changeData">
</FileTree>

#method:
changeData(e){
      console.log(e)
      this.treeVisible=e
},
子组件
this.$emit('changeData',false)

注意：若全局传的时候一般用vuex，父传子一般用props。

3.el-tree

3.1用el-dialog和el-tree封装一个文件选择器

<el-dialog title="文件选择器"
             :visible.sync="visible"
             :show-close="false">//取消关闭按钮
    <el-tree
      :data="treeData"//tree数据
      :props="defaultProps"
      ref="tree"
      node-key="value"
      @check="check"//选中响应,可以返回已选中的数据
      :show-checkbox="true">//是否可选择
   </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>

数据类型

treeData: [],
defaultProps: {
  children: 'children',
  label: 'label'
},

value：1//这里采用自增value++

这里后端返回的是只有全路径数据数组，需要处理，处理代码如下。

// 递归函数，将路径数组转换为el-tree所需的数据格式
    transformPathsToTreeData(paths) {
      const treeData = [];
      // 遍历路径数组
      paths.forEach(path => {
        const parts = path.split('/'); // 将路径拆分为部分
        let currentNode = treeData;
        // 遍历路径的每个部分
        // eslint-disable-next-line no-unused-vars
        parts.forEach((part, index) => {
          if (part!==''){
            const existingNode = currentNode.find(node => node.label === part);