标签：控件 console name pid element 复制粘贴 data id log

需要下载lodash
父组件

<template>
  <div>
    <myTree :data="allData"></myTree>
  </div>
</template>
<script>
import myTree from './myTree'
export default {
  components: {
    myTree,
  },
  data() {
    return {
      allData: '',
      parent: [
        { name: '理论学习', pid: 0, id: 1 },
        { name: '党务工作', pid: 0, id: 2 },
        { name: '党性教育', pid: 0, id: 3 },
        { name: '形势政策', pid: 0, id: 4 },
        { name: '特色课件', pid: 0, id: 5 },
      ],
      child: [
        {
          name: '中国共产党指导思想',
          pid: 1,
          id: 10001,
        },
        { name: '党章党规', pid: 1, id: 10002 },
        { name: '党章党规2', pid: 10002, id: 100022 },
        { name: '新时代党的建设', pid: 1, id: 10003 },
        { name: '基层党组织建设', pid: 2, id: 10004 },
        { name: '党员教育管理监督', pid: 2, id: 10005 },
        { name: '其他', pid: 2, id: 10006 },
        { name: '四史教育', pid: 3, id: 10007 },
        { name: '党风廉政建设', pid: 3, id: 10008 },
        { name: '先进模范人物', pid: 3, id: 10009 },
        { name: '党的路线方针政策', pid: 4, id: 10010 },
        { name: '世情国情党情', pid: 4, id: 10011 },
        { name: '时事热点', pid: 4, id: 10012 },
        { name: '爱国主义教育', pid: 5, id: 10013 },
        { name: '主题教育', pid: 5, id: 10014 },
        { name: '其他', pid: 5, id: 10015, url: 'wwww.baidu.com' },
      ],
    }
  },
  created() {
    this.allData = [...this.parent, ...this.child]
  },
}
</script>
<style lang="scss" scoped>
</style>

子组件

<template>
  <div>
    <el-tree
      :data="result"
      highlight-current
      node-key="id"
      :render-content="renderContent"
      check-on-click-node
      :expand-on-click-node="false"
    ></el-tree>
    <!--添加 弹出框 -->
    <el-dialog title="添加数据" :visible.sync="dialogAdd" width="30%" center>
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="标题名称">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="url地址">
          <el-input
            v-model="formLabelAlign.url"
            placeholder="非必填"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="add">确认</el-button>
      </el-form>
    </el-dialog>
    <!--修改 弹出框 -->
    <el-dialog title="修改数据" :visible.sync="dialogModify" width="30%" center>
      <div style="margin: 20px"></div>
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item label="标题名称">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="url地址">
          <el-input v-model="formLabelAlign.url"></el-input>
        </el-form-item>
        <el-button type="primary" @click="modify">确认</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  name: 'myTree',
  data() {
    return {
      id:'',
      dataOnly: '',
      dialogModify: false,
      labelPosition: 'top',
      formLabelAlign: {
        title: '',
        url: '',
      },
      resultData: null,
      result: null,
      operation: [
        { text: '添加', value: '添加信息' },
        { text: '修改', value: '修改信息' },
        { text: '删除', value: '删除信息' },
      ],
      dialogAdd: false,
    }
  },
  watch: {
    data() {
      this.tansformData()
    },
  },
  methods: {
    tansformData() {
      const allData = _.cloneDeep(this.data)
      // console.log("this.allData", this.allData);
      const treeMapList = allData.reduce((memo, current) => {
        // current['label'] = current.name
        memo[current['id']] = current
        return memo
      }, {})
      console.log('treeMapList', treeMapList)
      console.log('allData', allData)
      //
      this.result = allData.reduce((arr, current) => {
        console.log('current.id', current.id)
        //获取子孙的pid
        const pid = current.pid
        const parent = treeMapList[pid]
        if (parent) {
          parent.children
            ? parent.children.push(current)
            : (parent.children = [current])
        } else if (pid == 0) {
          arr.push(current)
        }
        return arr
      }, [])
      console.log(this.result)
    },
    //判断有无url
    hasUrl(data) {
      if (data.url) {
        return data.name + '---' + '跳转链接' + ':' + data.url
      }
    },
    //页面渲染
    renderContent(h, { node, data, store }) {
      console.log('初始data', data)
      return (
        <div style={{ width: '100%' }}>
          {this.hasUrl(data) ? this.hasUrl(data) : <span>{data.name}</span>}

          <el-dropdown
            placement="bottom-start"
            trigger="click"
            on-command={(value) => {
              this.handleCommand(data, value, node)
            }}
          >
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              {this.operation.map((item) => {
                return (
                  <el-dropdown-item command={item.text}>
                    {item.value}
                  </el-dropdown-item>
                )
              })}
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      )
    },
    //
    handleCommand(data, value, node) {
      console.log(data, node)
      if (value == '删除') {
        console.log('删除')
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            //删除节点
            const parent = node.parent
            const children = parent.data.children || parent.data
            const index = children.findIndex((d) => d.id === data.id)
            children.splice(index, 1)
            //调接口
            //
            this.$message({
              type: 'success',
              message: '删除成功!',
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
      } else if (value == '修改') {
        console.log('修改')
        this.dialogModify = true
        console.log(data.name, data.url)
        this.formLabelAlign.url = data.url
        this.formLabelAlign.title = data.name
        this.dataOnly = data
      
      } else if (value == '添加') {
        console.log('增加dataOnly', data)
        this.dataOnly = data
        this.dialogAdd = true
      }
    },
    //数据初始化
    clearData() {
      this.formLabelAlign.title = ''
      this.formLabelAlign.url = ''
    },
    //确认添加
    add() {
      console.log(this.dataOnly)
      console.log(
        'name:',
        this.formLabelAlign.title,
        'url:',
        this.formLabelAlign.url
      )
      const newChild = {
        id: this.id,
        name: this.formLabelAlign.title,
        url: this.formLabelAlign.url,
        pid: this.dataOnly.id,
        children: [],
      }
      if (!this.dataOnly.children) {
        this.$set(this.dataOnly, 'children', [])
      }
      this.dataOnly.children.push(newChild)
      this.dialogAdd = false
        localStorage.setItem('id',this.id++)
        console.log(localStorage.getItem("id"))
        //调接口
    },
    //确认修改
    modify() {
      console.log('modify', this.dataOnly)
      this.dataOnly['name'] = this.formLabelAlign.title
      this.dataOnly['url'] = this.formLabelAlign.url
      this.dialogModify = false
      //调接口
    },
  },
  created() {
    if (localStorage.getItem('id')) {
      this.id = localStorage.getItem('id')
    } else {
      localStorage.setItem('id', 2000)
      this.id=2000
    }
  },
  mounted() {
    this.tansformData()
  },
}
</script>
<style lang="scss" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/deep/.el-tree-node__content {
  height: 50px !important;
}
/deep/.el-tree {
  width: 50%;
}
/deep/.el-dropdown {
  float: right !important;
}
</style>

标签：控件,console,name,pid,element,复制粘贴,data,id,log
来源： https://blog.csdn.net/weixin_46176363/article/details/110448598

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。