自定义tree节点内容(反显) 选取后动态生成表格

最新推荐文章于 2024-02-22 11:27:49 发布

q438669265

最新推荐文章于 2024-02-22 11:27:49 发布

阅读量276

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/q438669265/article/details/126333918

版权

本文介绍如何在Vue.js应用中，通过自定义tree组件节点内容，并实现节点选择后的反显，动态生成对应的表格展示。该功能适用于前端数据展示场景，通过选择tree节点，将详细信息以表格形式呈现。

摘要由CSDN通过智能技术生成

  <div>
    <el-tree
       :default-checked-keys="taskBack"
      ref="SlotTree"
      auto-expand-parent
      style=" overflow: auto;"
      :data="treeData"
      :props="defaultProps"
      :expand-on-click-node="true"
      :node-key="NODE_KEY"
      show-checkbox
      @check-change="handleCheckChange"
    >
      <!-- NODE_KEY设置为id -->
      <div class="comp-tr-node" slot-scope="{ node, data }">
        <!-- 增加状态 -->
        <template v-if="node.isAdd">
          <el-input
            v-model="newNodeValue"
            width="100"
            autofocus
            size="mini"
            :ref="'slotTreeInput' + data[NODE_KEY] + 1"
            @blur.stop="handleAddInput(node, data)"
            @keyup.enter.native="handleAddInput(node, data)"
          ></el-input>
        </template>
        <!-- 编辑状态 -->
        <template v-if="node.isEdit">
          <el-input
            v-model="data.label"
            autofocus
            size="mini"
            :ref="'slotTreeInput' + data[NODE_KEY]"
            @blur.stop="handleInput(node, data)"
            @keyup.enter.native="handleInput(node, data)"
          ></el-input>
        </template>

        <!-- 非编辑状态 -->
        <template v-else>
          <!-- 名称： 新增节点增加class（is-new） -->
          <span
            :class="[
              data[NODE_KEY] > NODE_ID_START ? 'is-new' : '',
              'comp-tr-node--name'
            ]"
          >{
  { node.label }}</span>

          <!-- 按钮 -->
          <span class="comp-tr-node--btns">
            <!-- 新增 -->
            <el-tooltip class="item" effect="dark" content="新增" placement="top">
              <el-button
                v-if="node.level == 1"
                icon="el-icon-plus"
                style="padding:1px"
                size="mini"
                circle
                type="primary"
                @click="handleAdd(node, data)"
              ></el-button>
            </el-tooltip>

            <!-- 编辑 -->
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <el-button
                icon="el-icon-edit"
                style="padding:1px"
                size="mini"
                circle
                type="info"
                @click="handleEdit(node, data)"
              ></el-button>
            </el-tooltip>

            <!-- 删除 -->
            <!-- <el-button icon="el-icon-delete" size="mini" circle type="danger" @click="handleDelete(node, data)">
            </el-button>-->
          </span>
        </template>
      </div>
    </el-tree>
    <!-- <button @click="fun1">23423423</button> -->
  </div>
</template>

<script>
import { saveNode, updateNode } from "@/api/xcjc/taskingMgt";
export default {
  // inject:['reload'],
  name: "component-tree",
  props: {
    treeData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    taskBack: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      selectArr: [],
      treeOriganData: [],
      //页面初始化后把树数据的父id都保存起来
      parentIds: [],
      //多选树节点信息存储
      nodeSelectArr: [],
      //新增父id的值
      parentId: null,
      //获取的tree数据
      // treeData: [],
      //新增节点的值
      newNodeValue: "",
      //把修改前的label值存起来
      beforeEditValue: "",
      isLoading: false, // 是否加载
      // setTree:
      NODE_KEY: "value", // id对应字段
      MAX_LEVEL: 2, // 设定最大层级
      NODE_ID_START: 999, // 新增节点id，逐次增加
      startId: null,
      defaultProps: {
        // 默认设置
        children: "children",
        label: "label"
      },
      initParam: {
        // 新增参数
        label: "新增节点",
        pid: 0,
        children: []
      },
      saveNodeFrom: {
        parentId: "",
        name: "",
        proId: "",
        orgTypeId: ""
      },
      updateNodeFrom: {
        id: "",
        name: ""
      }
    };
  },
  created() {
    localStorage.setItem("nodeSelectData"