【Vue Project Combat 8】リソースツリーel-treeの入力フォーム【Element UI】==>階層アイコンスタイルを追加==>操作バーを表示するノードを選択(新規、修正、削除)==>追加箇条書きボックスを削除します

プログラミング 2023-05-04 19:34:39 訪問数: null

常に自分を優先することを忘れないでください。

前回のブログですでにel-treeのスタイル変更の一種【Vueプロジェクト実戦7】【ElementUIスタイルの最適化】を紹介していますel-tree ==>グレーディングアイコンの追加==>ガイドラインスタイルの追加==>[ノード- クリック] ノードをクリックしてすべての親ノード情報を表示 ==> $store を使用してグローバル コンポーネントをカプセル化_Xiaobai Rachel のブログ - CSDN ブログ

このブログでは、別の el-tree スタイルの最適化を引き続き整理します。 

 このブログの効果を簡単に見てみましょう: (ニーズを満たしているかどうかを確認してください)

(1) CSSレイヤードアイコンとレイヤードスタイル(最大5レイヤーまで)

(2) 選択したノードの表示 [操作バー] には、子ノードの追加、現在のノードの変更、現在のノードの削除が含まれます。

(3) 選択ノード == 変更時は選択ノードと親ノードをエコーし​​、追加時は現在のノードを表示。

(4) 新しい第 1 レベル ノードを追加する

(5) 親ノードは、Zoyi に付属の treeselect コンポーネントを使用します。

目次

1.基本的なツリー構造

 2. ツリーのフロントエンド スタイルを最適化する

1. リソース グルーピング ツリーの入力フォーム

2. レイヤード アイコンとレイヤード スタイルを追加する

 3. 機能効果を追加する

1. 新しい第 1 レベルのリソース グループを作成します (ポップアップ ボックス)。

2. ノードをクリックすると[操作バー]が表示されます

3. 選択したノード (箇条書きボックス) の子ノードを追加/変更します。

4. 親ノードは Zoyi 独自の treeselect コンポーネントを使用します

添付資料：全ページコード（クイックルック）

1.基本的なツリー構造

まず、最も基本的なツリー構造を与えます (1) ノードはデフォルトで展開されます; (2) 展開と折りたたみの効果をキャンセルします

<template>
  <div class="app-content">
    <div class="app-container">
      <!-- 资源分组树 -->
      <div>
        <div style="height: 400px; padding-bottom: 10px; width: 200px">
          <div class="treeBox">
            <el-tree
              :data="resourceData.data"
              node-key="id"
              ref="tree"
              default-expand-all
              :expand-on-click-node="false"
              :props="defaultProps"
              class="tree"
              style="width: 100%"
              @node-click="handle"
              highlight-current 
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "resourceTree",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      resourceData: {
        code: 200,
        message: "SUCCESS",
        data: [
          {
            id: "c21d02ec204c3d9f9591a45a67f58195",
            name: "在用资源",
            parentId: "",
            children: [
              {
                id: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                name: "测试组1",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "af5c690fb122371074db20eb19e474b2",
                    name: "测试组1.3",
                    parentId: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                    children: [
                      {
                        id: "e5268c1b5f6fb09152739fc07cfc2a4b",
                        name: "测试组1.4",
                        parentId: "af5c690fb122371074db20eb19e474b2",
                        children: [
                          {
                            id: "a02b0e65def409e6b217c01f54e5732a",
                            name: "测试组1.5",
                            parentId: "e5268c1b5f6fb09152739fc07cfc2a4b",
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                id: "88f69770e9d94e32d81ea49eb2bf05e8",
                name: "测试组2",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
              {
                id: "294c01cd26f41cb54dd75c0098335b5b",
                name: "317平台",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "936fba4555abad9872803d90a5304fdc",
                    name: "烽火",
                    parentId: "294c01cd26f41cb54dd75c0098335b5b",
                    children: [
                      {
                        id: "4a5d79d291fc74e495d6ee7129fa213e",
                        name: "涉访专项",
                        parentId: "936fba4555abad9872803d90a5304fdc",
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                id: "cb6cd8a969c41698e00f7c6a9ad36d38",
                name: "zB系统",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
            ],
          },
          {
            id: "eaced9ffb820418cbe98691c781c6baa",
            name: "空闲资源",
            parentId: "",
            children: [],
          },
        ],
        success: true,
      },
      treeGroup: [],
    };
  },
  created() {},
  methods: {},
};
</script>

<style lang="scss" rel="stylesheet/scss"  scoped>
</style>

 2. ツリーのフロントエンド スタイルを最適化する

UI によって与えられたデザイン ドラフトは次のとおりです。

1. リソース グルーピング ツリーの入力フォーム

 観察に注意してください。実際には入力フォームではありませんが、スタイルは入力に少し似ています

ツリー ノードに入力を追加すると、次のようになります。

 既存の問題: 入力に組み込みのアイコンを追加する必要があります. 縦棒ブロガーを追加しても、このアイデアによる最終的な効果は得られませんでした. あなたはそれを試すことができます.

//-------------1.修改节点input框样式----------
.el-tree ::v-deep .el-tree-node .el-tree-node__content {
  width: 260px;
  height: 40px;
  background: rgb(255, 255, 255);
  margin: 5px 40px 0px 8px;
  color: #666666;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 4px !important;
}
// 节点和子节点的tab间距
.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 46px;
}
// 选中之后的颜色变化
.el-tree ::v-deep .is-current > .el-tree-node__content {
  border: 2px solid #2181f5;
}

変更された効果:

 2. レイヤード アイコンとレイヤード スタイルを追加する

アイコンと内部カラー バー効果を追加するには、el-tree にコードを追加する必要があります。

<span class="custom-tree-node1" slot-scope="{ node, data }">
     <span class="el-tree-node__label hh">{
   
   { node.label }}</span>
</span>
// ----------2.添加分层图标和样式--------
.custom-tree-node1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  // padding-left: 8px;
  padding-top: 7px;
}
// 一级节点图标
.el-tree ::v-deep .el-tree-node__content .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/1.png") no-repeat 0 3px;
}
// 颜色装饰
.el-tree ::v-deep .el-tree-node__content:before {
  content: "";
  min-width: 3px !important;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #103289;
}
// 二级节点
.el-tree ::v-deep .el-tree-node__children .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/2.png") no-repeat 0 3px;
}
.el-tree ::v-deep .el-tree-node__children .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #506cfe;
}
// 三级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/3.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #2181f5;
}
// 四级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/4.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #00b9ff;
}
// 五级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/5.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #fe9c50;
}
// 调整文字label高度
.hh {
  background: #fe9c50;
  content: "";
  display: block;
  width: 3px;
  height: 26px;
  background-size: 16px;
  margin-right: 10px;
}


//-------------1.修改节点input框样式----------
.el-tree ::v-deep .el-tree-node .el-tree-node__content {
  width: 260px;
  height: 40px;
  background: rgb(255, 255, 255);
  margin: 5px 40px 0px 8px;
  color: #666666;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 4px !important;
}
// 节点和子节点的tab间距
.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 46px;
}
// 选中之后的颜色变化
.el-tree ::v-deep .is-current > .el-tree-node__content {
  border: 2px solid #2181f5;
}

 3. 機能効果を追加する

 効果の説明: (1) [新しい第 1 レベルのリソース グループ] をクリックし、ポップアップ ボックスにグループを追加します。

(2) ノードをクリックした後 ==> ノードに操作バー {新規、変更、削除} が表示されます。

(3) ノードをクリックした後 ==> [新規] をクリック ==> ポップアップ ボックスでサブノード グループを追加

(4) ノードをクリックした後 ==> 「変更」をクリック ==> ポップアップ ボックスでノードを変更し、同時に上位レベルの変更をサポートします。

(5) ノードをクリックした後 ==> 「削除」をクリック ==> ノードとそのノードのすべての子ノードを削除

1. 新しい第 1 レベルのリソース グループを作成します (ポップアップ ボックス)。

主にデータフィールドを含む

title: "", // 弹框标题-新建/编辑
newVis: false, // 控制弹框显示
form: {}, //弹框表格
isfirst: false, // 是否是新建一级节点-控制父节点显示
isEdit: false, // 编辑-删除
rule: {
        name: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
},

(1) [新しい第 1 レベル グループの作成] をクリックすると、handle1() 関数が呼び出されます。

(2) 新しいVIを使用して、ブレットボックスの表示を制御します。==> title はタイトル テキストを制御します。

(3) バインディング ルール検証ルール。 

(4) isfirst を使用して、それが新しい第 1 レベル ノードかどうかを判断します ==> フォーム内の「親ノード」を非表示にする必要があります

<!-- 新建=编辑 弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="newVis"
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rule" label-width="120px">
          <el-form-item label="父节点:" prop="parentId" v-if="!isfirst">
            <!-- <el-input v-model="form.parentId" placeholder="请输入" /> -->
            <treeselect
              v-model="form.parentId"
              :multiple="false"
              :options="treeData"
              :props="fullProps"
              placeholder="请选择"
              :normalizer="normalizer"
              :disabled="isEdit ? false : true"
            />
          </el-form-item>
          <el-form-item label="资源分组名称:" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="createGroup()"
            v-if="isEdit ? false : true"
            >确 定</el-button
          >
          <el-button type="primary" size="mini" @click="editGroup()" v-else
            >修 改</el-button
          >
          <el-button @click="cancel()" size="mini">取 消</el-button>
        </div>
      </el-dialog>

 2. ノードをクリックすると[操作バー]が表示されます

 (1) operationVis は操作バーの表示と非表示を制御するために使用されます; ==> 選択されたノードの ID を this.operationVis = data.id; in handleNodeClick() に記録することにより、el-tree で選択されたノードを見つけます。

次のコードを el-tree コンポーネントに追加します。

<div class="tree">
        <el-tree
          ref="tree"
          :data="treeData"
          :check-strictly="true"
          node-key="id"
          default-expand-all
          :props="defaultProps"
          style="width: 900px"
          highlight-current
          check-on-click-node
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        >
          <!-- @check="changetree"
          @check-change="handleNodeClick" -->
          <span class="custom-tree-node1" slot-scope="{ node, data }">
            <!-- <span class="el-tree-node__label"></span>-->
            <span class="el-tree-node__label hh">{
   
   { node.label }}</span>
            <span class="operation1" v-show="data.id == operationVis">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handle(0)"
                >新建</el-button
              >
              <el-button plain size="mini" @click="handle(1)">修改</el-button>
              <el-button plain size="mini" @click="handleDelete()"
                >删除</el-button
              >
            </span>
          </span>
        </el-tree>
      </div>

(2) setCheckedKeys 現在チェックされているノードをキーで設定

this.$refs.tree.setCheckedKeys([data.id]); を使用して、現在のノードの ID を記録します。これは、この操作を追加するときに親ノードの情報を取得したり、編集時に情報をエコーし​​たりするのに便利です。

// 树节点击函数
    handleNodeClick(data) {
      // if (data.id !== "eaced9ffb820418cbe98691c781c6baa") {   // 空闲节点不可编辑
        this.operationVis = data.id;
      // } else {
      //   this.operationVis = -1;
      // }
      this.$refs.tree.setCheckedKeys([data.id]);
    },

 3. 選択したノード (箇条書きボックス) の子ノードを追加/変更します。

 // 次の 3 つの関数を区別する

getCurrentNode 現在選択されているノードのデータを取得します。ノードが選択されていない場合は null を返します

getCheckedNodes ノードを選択できる場合、現在選択されているノードの配列を返します

getCheckedKeys ノードを選択できる場合、現在選択されているノードのキーの配列を返します

ノードを選択したら、選択したノードの情報を出力します

console.log("current", this.$refs.tree.getCurrentNode());
console.log("checked", this.$refs.tree.getCheckedNodes());
console.log("checkedkey", this.$refs.tree.getCheckedKeys());

 

 

 

(1) [追加] または [変更] をクリックして handel(0) を呼び出します; handle(1) はデータのエコーに使用されます

(2) 「追加」をクリックすると、親ノード情報がエコーされる必要があります

(3) [編集] をクリックすると、現在のノードと親ノードの情報をエコーする必要があります。

// 新建-修改弹框
    handle(isEdit) {
      this.isfirst = false;
      this.isEdit = isEdit;
      if (isEdit) {
        // 如果没有选中-显示提示信息
        if (this.$refs.tree.getCheckedKeys().length == 0) {
          this.$message.warning("请选中资源分组进行修改");
        } else {
          this.title = "修改资源分组";
          this.newVis = true;
          this.form = {
            parentId: this.$refs.tree.getCheckedNodes()[0].parentId
              ? this.$refs.tree.getCheckedNodes()[0].parentId
              : null,
            name: this.$refs.tree.getCheckedNodes()[0].name,
          };
        }
      } else {
        this.newVis = true;
        this.title = "新建资源分组";
        this.form = {
          parentId: this.$refs.tree.getCheckedKeys()[0], // 选中的节点（可能是父节点）
          name: "",
        };
      }
    },

4. 親ノードは Zoyi 独自の treeselect コンポーネントを使用します

このシステムは、直接使用できる独自の treeselect コンポーネントを備えた Ruoyi フレームワークを使用します。ここでは詳しく説明しません。

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

components: { Treeselect },
<treeselect
              v-model="form.parentId"
              :multiple="false"
              :options="resourceData.data"
              :props="fullProps"
              placeholder="请选择"
              :normalizer="normalizer"
              :disabled="isEdit ? false : true"
/>

添付資料：全ページコード（クイックルック）

<template>
  <div class="app-content">
    <div class="app-container">
      <!-- 资源分组树 -->
      <div>
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="small"
          @click="handle1()"
          style="margin-left: 50px; width: 200px"
          >新建一级资源分组</el-button
        >
        <div style="min-height: 400px; padding-bottom: 10px; width: 1000px">
          <div class="treeBox">
            <div class="tree">
              <el-tree
                ref="tree"
                :data="resourceData.data"
                :check-strictly="true"
                node-key="id"
                default-expand-all
                :props="defaultProps"
                style="width: 900px"
                highlight-current
                check-on-click-node
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
              >
                <span class="custom-tree-node1" slot-scope="{ node, data }">
                  <span class="el-tree-node__label hh">{
   
   { node.label }}</span>
                  <span class="operation1" v-show="data.id == operationVis">
                    <el-button
                      type="primary"
                      plain
                      icon="el-icon-plus"
                      size="mini"
                      @click="handle(0)"
                      >新建</el-button
                    >
                    <el-button plain size="mini" @click="handle(1)"
                      >修改</el-button
                    >
                    <el-button plain size="mini" @click="handleDelete()"
                      >删除</el-button
                    >
                  </span>
                </span>
              </el-tree>
            </div>
          </div>
        </div>
      </div>
      <!-- 新建弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="newVis"
        width="400px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rule" label-width="120px">
          <el-form-item label="父节点:" prop="parentId" v-if="!isfirst">
            <treeselect
              v-model="form.parentId"
              :multiple="false"
              :options="resourceData.data"
              :props="fullProps"
              placeholder="请选择"
              :normalizer="normalizer"
              :disabled="isEdit ? false : true"
            />
          </el-form-item>
          <el-form-item label="资源分组名称:" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            @click="createGroup()"
            v-if="isEdit ? false : true"
            >确 定</el-button
          >
          <el-button type="primary" size="mini" @click="editGroup()" v-else
            >修 改</el-button
          >
          <el-button @click="cancel()" size="mini">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "groupTree",
  components: { Treeselect },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
      fullProps: {
        children: "children",
        label: "fullname",
        value: "id",
      },
      resourceData: {
        code: 200,
        message: "SUCCESS",
        data: [
          {
            id: "c21d02ec204c3d9f9591a45a67f58195",
            name: "在用资源",
            parentId: "",
            children: [
              {
                id: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                name: "测试组1",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "af5c690fb122371074db20eb19e474b2",
                    name: "测试组1.3",
                    parentId: "5cbf0e4bf6c455f2b90f26dccc7f2c7c",
                    children: [
                      {
                        id: "e5268c1b5f6fb09152739fc07cfc2a4b",
                        name: "测试组1.4",
                        parentId: "af5c690fb122371074db20eb19e474b2",
                        children: [
                          {
                            id: "a02b0e65def409e6b217c01f54e5732a",
                            name: "测试组1.5",
                            parentId: "e5268c1b5f6fb09152739fc07cfc2a4b",
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                id: "88f69770e9d94e32d81ea49eb2bf05e8",
                name: "测试组2",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
              {
                id: "294c01cd26f41cb54dd75c0098335b5b",
                name: "317平台",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [
                  {
                    id: "936fba4555abad9872803d90a5304fdc",
                    name: "烽火",
                    parentId: "294c01cd26f41cb54dd75c0098335b5b",
                    children: [
                      {
                        id: "4a5d79d291fc74e495d6ee7129fa213e",
                        name: "涉访专项",
                        parentId: "936fba4555abad9872803d90a5304fdc",
                        children: [],
                      },
                    ],
                  },
                ],
              },
              {
                id: "cb6cd8a969c41698e00f7c6a9ad36d38",
                name: "zB系统",
                parentId: "c21d02ec204c3d9f9591a45a67f58195",
                children: [],
              },
            ],
          },
          {
            id: "eaced9ffb820418cbe98691c781c6baa",
            name: "空闲资源",
            parentId: "",
            children: [],
          },
        ],
        success: true,
      },
      treeGroup: [],
      // -------------三---------------
      title: "", // 弹框标题-新建/编辑
      newVis: false, // 控制弹框显示
      form: {}, //弹框表格
      isfirst: false, // 是否是新建一级节点-控制父节点显示
      isEdit: false, // 编辑-删除
      rule: {
        name: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "资源分组名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
      },
      operationVis: "", // 控制操作栏展示与隐藏
    };
  },
  created() {},
  methods: {
    // 新建-编辑弹框控制函数
    handle1() {
      this.newVis = true;
      this.title = "新建资源分组";
      this.isfirst = true;
      this.form = {
        name: "",
      };
    },
    // 树节点击函数
    handleNodeClick(data) {
      if (data.id !== "eaced9ffb820418cbe98691c781c6baa") {
        this.operationVis = data.id;
      } else {
        this.operationVis = -1;
      }
      this.$refs.tree.setCheckedKeys([data.id]);
      // this.$refs.tree.setCheckedNodes(data);
      console.log("点击选中节点：", data.name);
      console.log("checkedkey", this.$refs.tree.getCheckedKeys());
    },
    // 新建-修改弹框
    handle(isEdit) {
      this.isfirst = false;
      this.isEdit = isEdit;
      if (isEdit) {
        this.title = "修改资源分组";
        this.newVis = true;
        // 修改资源-修改当前节点，回显其父节点
        // console.log("current", this.$refs.tree.getCurrentNode());
        console.log("checked", this.$refs.tree.getCheckedNodes());
        console.log("checkedkey", this.$refs.tree.getCheckedKeys());
        // console.log("currentNodeId", his.$refs.tree.getCheckedKeys()[0]);
        this.form = {
          parentId: this.$refs.tree.getCheckedNodes()[0].parentId
            ? this.$refs.tree.getCheckedNodes()[0].parentId
            : null,
          name: this.$refs.tree.getCheckedNodes()[0].name,
        };
      } else {
        this.newVis = true;
        this.title = "新建资源分组";
        // 新增资源-在选中节点下添加
        // console.log(this.$refs.tree.getCurrentKey(), "current");
        console.log(this.$refs.tree.getCheckedKeys(), "checked");
        this.form = {
          parentId: this.$refs.tree.getCheckedKeys()[0], // 选中的节点（可能是父节点）
          name: "",
        };
      }
    },
    // 格式化节点
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
    createGroup() {},
    editGroup() {},
    cancel() {
      this.newVis = false;
      this.deleteVis = false;
    },
    handleDelet() {},
  },
};
</script>

<style lang="scss" rel="stylesheet/scss"  scoped>
.tree {
}
//-------------1.修改节点input框样式----------
.el-tree ::v-deep .el-tree-node .el-tree-node__content {
  width: 200px;
  height: 40px;
  background: rgb(255, 255, 255);
  margin: 5px 40px 0px 8px;
  color: #666666;
  font-size: 14px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding-left: 4px !important;
}
// 节点和子节点的tab间距
.tree ::v-deep .el-tree-node {
  position: relative;
  padding-left: 46px;
}
// 选中之后的颜色变化
.el-tree ::v-deep .is-current > .el-tree-node__content {
  border: 2px solid #2181f5;
}

// ----------2.添加分层图标和样式--------
.custom-tree-node1 {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  // padding-left: 8px;
  padding-top: 7px;
}
// 一级节点图标
.el-tree ::v-deep .el-tree-node__content .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/1.png") no-repeat 0 3px;
}
// 颜色装饰
.el-tree ::v-deep .el-tree-node__content:before {
  content: "";
  min-width: 3px !important;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #103289;
}
// 二级节点
.el-tree ::v-deep .el-tree-node__children .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/2.png") no-repeat 0 3px;
}
.el-tree ::v-deep .el-tree-node__children .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #506cfe;
}
// 三级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/3.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #2181f5;
}
// 四级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/4.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #00b9ff;
}
// 五级节点
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__label {
  padding-left: 15px;
  background: url("~@/assets/images/tree/5.png") no-repeat 0 3px;
}
.el-tree
  ::v-deep
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__children
  .el-tree-node__content:before {
  content: "";
  width: 3px;
  height: 30px;
  /*display: inline-block 允许在元素上设置宽度和高度*/
  display: inline-block;
  background: #fe9c50;
}
// 调整文字label高度
.hh {
  background: #fe9c50;
  content: "";
  display: block;
  width: 3px;
  height: 26px;
  background-size: 16px;
  margin-right: 10px;
}

.operation1 {
  margin-left: 150px;
  padding-bottom: 7px;
}
</style>

おすすめ

転載: blog.csdn.net/Sabrina_cc/article/details/125390097
おすすめ
ランキング
Web側のオンラインクラウド編集ソリューション
2つのシナリオでのJVMチューニングケース（基本テンプレートの概要-G1）-ピット概要ハイライト21を踏む（週に1回更新）
Node Sass は現在の環境のバインディングを見つけることができませんでした
RabbitMQのコマンドラインの使用方法は、手動でキューrabbitmqadminを作成します
币圈韭菜十大致命操作（八）热爱幻想，无视现实
Wide Face+YOLOV7 顔検出
shrioの研究ノート
Eclipseは「：不明なMavenの設定の問題」を示します
6512. [3.18] GDOI2020シミュレーションツリーとパス
不像总结的总结
アーカイブ
もっと
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)

コードワールド

© 2018 codetd.com