精华内容
下载资源
问答
  • elementui树形组件的自定义增删节点

    万次阅读 多人点赞 2018-01-03 17:31:06
    elementUI树新增和删除的功能 vue项目 elementui树 el-tree新增和删除节点 elementui新增和删除节点树 el-tree新增和删除节点图标 vue和elemenui树

    elementUI树自定义增删改的功能

    如图所示,自定义可增删的树组件

    • 需求:
      • 基于vue和elementui组件的el-tree写一个树的样式;
      • 可以添加和删除当前节点;
      • 添加点击后出现弹窗,进行添加的编辑;如图所示:
        • 点击新增节点出现弹出框
        • 弹出框样式,输入的名称和标识作为树的显示名称
        • 最终新增的树的节点
      • 根据当前节点的情况确定是否需要显示删除和添加的图标;例如:如果是根节点,则只能添加不能删除;

    准备

    • 参考文档:https://segmentfault.com/a/1190000011574698
    • 新增节点思路:
      • 点击新增按钮之后,出现弹出框;
      • 读取用户输入的信息传递给后台,并且请求数据(节点id、节点名称、节点是否可新增、节点是否可删除等);
      • 将请求回来的数据在树形组件上进行渲染;
    • 删除节点思路:
      • 点击当前要删除的节点,获取当前id;
      • 根据当前节点id,遍历其所有的children,在list中进行删除;

    项目使用中的注意

    • 该树形组件是基于vue和webspack的,而elementUI中在树的节点区添加按钮或图标等内容,需要使用render-content指定渲染函数;
    • 首先需要下载依赖包,此处主要讲需要使用的jsx部分,需要下载以下安装包:
    npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --save-dev
    • 然后需要配置.babelrc(此处配置很重要), 如下:
    {
      "presets": [
        ["env", {
          "modules": false,
          "targets": {
            "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
          }
        }],
        "stage-2"
      ],
      "plugins": ["transform-runtime","transform-vue-jsx"],
      "env": {
        "test": {
          "presets": ["env", "stage-2"],
          "plugins": ["transform-vue-jsx","istanbul"]
        }
      }
    }

    源码

    • html
    <!--树形控件-->
    <el-aside width="300px" style="padding: 15px;">
        <el-tree
            ref="eventCategoryTree"
            :data="eventCategoryTree"
            :props="defaultProps"
            node-key="id"
            highlight-current
            default-expand-all
            :render-content="renderContent"
            :expand-on-click-node="false">
        </el-tree>
    </el-aside>
    
    <!--新增事件节点分类弹窗-->
    <el-dialog
      title="新增事件分类"
      width="25%"
      class="add-event-dialog"
      :visible.sync="addEventdialogVisible"
      size="tiny">
      <el-form ref="addEventForm" :model="addEventForm" :rules="addEventNodeRules">
        <el-form-item label="分类名称" prop="categoryName" >
          <el-input v-model="addEventForm.categoryName"></el-input>
        </el-form-item>
        <el-form-item label="分类标识" prop="categoryFlag">
          <el-input v-model="addEventForm.categoryFlag"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" >
        <el-button @click="addEventFormCancleBtn('addEventForm')">取 消</el-button>
        <el-button type="primary" @click="addEventFormSubmitBtn('addEventForm')">确 定</el-button>
      </span>
    </el-dialog>
    • data
    //树组件的数据
    eventCategoryTree: [
     {
        id: 1,
        label: '一级 1',
        addAble: true,  //根据后台给的是否可添加节点,也可以根据当前的node节点自行判断
        delAble: false,  //根据后台给的是否可删除节点,也可以根据当前的node节点自行判断
        parentId: '',
        children: [{
          id: 4,
          label: '二级 1-1',
          addAble: false,
          delAble: true,
          parentId: '1',
        },{
          id: 5,
          label: '二级 2-1',
          addAble: false,
          delAble: true,
          parentId: '1',
        }, {
          id: 6,
          label: '二级 2-2',
          addAble: false,
          delAble: true,
          parentId: '1',
        },]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    
    /*触发的当前的节点,放到全局,方便调用*/
    triggerCurrenNodeData:{},
    /*触发的当前节点*/
    triggerCurrenNode:{},
    /*新增事件弹窗的输入框数据*/
    addEventdialogVisible: false,
    addEventForm:{
      categoryName: '',
      categoryFlag: '',
    },
    • 引入自定义的树:将该组件放置在同一个文件夹下以供调用;
      同级目录下的树组件
    import TreeRender from './tree_render.vue';
    • methods:
    /*渲染函数*/
    renderContent(h, { node, data, store }) {
        let that = this;//指向vue
        return h(TreeRender,{
          props:{
            NODE: node,
            DATA: data,
            STORE: store,
          },
          on:{
            //新增
            Append: ((s,d,n) => that.appendEvent(s,d,n)),
            //删除节点
            Delete: ((s,d,n) => that.removeEvent(s,d,n)),
            //查看
            WatchInfo: ((s,d,n)=> that.changeMainRegion(s,d,n))
          }
        }
      );
    },
    /*树形控件添加节点,添加弹窗出现*/
    appendEvent(s,d,n) {
      this.addEventdialogVisible = true;
      this.triggerCurrenNodeData = d;
      this.triggerCurrenNode = n;
    },
    /*树形控件删除节点*/
    removeEvent(s,d,n) {
      const parent = n.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(data => data.id === d.id);
      console.log(index,'索引')
      this.$confirm('确定要删除该节点吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http('delete', `/url/****/****/${d.id}`,{queryParams: null})
          .then((res) => {
            if (res.statusCode === 200) {
              children.splice(index, 1);
              this.$message({
                message: res.messages[0],
                type: 'success'
              });
            }
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    
     /*节点新增,新增树形菜单事件分类弹窗,提交按钮*/
    addEventFormSubmitBtn(formname){
      this.$refs[formname].validate((valid) => {
        if (valid) {
          console.log('验证成功')
          /*获取当前input上输入的文字*/
          let dataPost={
            label: this.addEventForm.categoryName.trim(),
            id: this.addEventForm.categoryFlag.trim(),
            parentId: this.triggerCurrenNodeData.id,  //当前节点id
            depth: this.triggerCurrenNode.level, //当前节点层级
          }
          this.$http('post', '/api/***/****', {queryParams: dataPost})
            .then((res) => {
              console.log('请求成功');
              if (res.statusCode === 200) {
                let result = res.data;
                /*点击弹窗的确定按钮可以得到输入的数据,作为新的节点名称插入*/
                /*如果没有子节点,就创建一个子节点插入*/
                if (!this.triggerCurrenNodeData.children) {
                  this.$set(this.triggerCurrenNodeData, 'children', []);
                };
                //如果已有子节点,就把返回的数据push进去,插入到树形数据中
                this.triggerCurrenNodeData.children.push(result);
                /*关闭弹窗,重置输入框*/
                this.addEventdialogVisible = false;
                this.$refs[formname].resetFields();
                /*刷新树形菜单*/
                //this.getDictionarytTree();
              }
            })
            .catch((e) => {
               console.log('请求失败',e)
            })
        } else {
          console.log('验证未通过');
          return false;
        }
      });
    },
    • 引入的自定义的树组件:
    <template>
          <span style="flex: 1; display: flex; align-items: center; font-size: 14px; padding-right: 8px;">
            <span @click="WatchInfo(STORE,DATA,NODE)" style="width: 80%">
              <span>{{DATA.label}}</span>
            </span>
            <span class="span_icon">
              <el-button style="font-size: 12px;" type="text" v-if="DATA.addAble" @click="Append(STORE,DATA,NODE)">
                <i class="el-icon-plus"></i>
              </el-button>
              <el-button style="font-size: 12px;" type="text" v-if="DATA.delAble" @click="Delete(STORE,DATA,NODE)">
                <i class="el-icon-delete"></i>
              </el-button>
            </span>
          </span>
    </template>
    
    <script>
      export default {
        name: '',
        data() {
            return {}
        },
        props: ['NODE', 'DATA', 'STORE'],
        methods:{
          Append(s,d,n){
            //添加节点事件
            this.$emit('Append',s,d,n)
          },
          Delete(s,d,n){
            this.$emit('Delete',s,d,n)
          },
          WatchInfo(s,d,n){
            this.$emit('WatchInfo',s,d,n)
          }
        }
      }
    </script>
    <style></style>
    展开全文
  • elementui树形控件强制展开有所节点 角色树形全部展开 this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … // this.refs.tree是树对象,通过树对象获取所有的树节点,遍历树节点设置expand...

    elementui树形控件强制展开有所节点

    角色树形全部展开
    this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … // this.refs.tree是树对象,通过树对象获取所有的树节点,遍历树节点设置expand属性为true则全部展开,设置为false则全部收起
    for (
    var i = 0;
    i < this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … if (this.refs.charTree.store._getAllNodes()[i].expanded == true) {
    continue;
    }
    this.$refs.charTree.store._getAllNodes()[i].expanded = true;
    }
    });

    展开全文
  • ElementUI树形表格默认展开,通过expand-row-keys设置默认展开行。我们在使用element的Table表格来编写树形表格时,官方提示需要除了正常配置外 row-key 树形是必须的官方给的例子配置了上面的这个属性后我们就可以...

    ElementUI树形表格默认展开,通过expand-row-keys设置默认展开行。

    我们在使用element的Table表格来编写树形表格时,官方提示需要除了正常配置外 row-key 树形是必须的

    官方给的例子

    配置了上面的这个属性后我们就可以使用 expand-row-keys 来配置默认展开的key

    对应 expand-row-keys 的配置,官方也没有给出例子,于是我就自己配置了一下

    ref="table"

    v-loading="listLoading"

    element-loading-text="数据拼命加载中"

    highlight-current-row

    row-key="id"

    style="width: 100%;margin-bottom: 20px;"

    :data="tableData"

    :expand-row-keys="[1,2,3]"

    :tree-props="{children: 'children', hasChildren: 'hasChildren0'}"

    @row-dblclick="handleRowDbClick"

    @expand-change="handleExpandChange"

    >

    然后发现并没有作用。

    说下我为什么会这样设置,

    因为数据的记录id是数字,所以在设置时我就理所应当的设置了对应记录的id进去。

    然后就一度怀疑人生,最后我改成这样就可了

    ref="table"

    v-loading="listLoading"

    element-loading-text="数据拼命加载中"

    highlight-current-row

    row-key="id"

    style="width: 100%;margin-bottom: 20px;"

    :data="tableData"

    :expand-row-keys="['1','2','3']"

    :tree-props="{children: 'children', hasChildren: 'hasChildren0'}"

    @row-dblclick="handleRowDbClick"

    @expand-change="handleExpandChange"

    >

    把数组里面的元素改成字符串就可以了 ???

    展开全文
  • 使用elementUI树形控件 <!--选择所属部门 --> <el-dialog title="请选择所属部门" :visible.sync="ischoosedept" width="35%"> <div class="choose-dialog-main" style="overflow:auto"> <...

    使用elementUI树形控件

      <!--选择所属部门 -->
        <el-dialog title="请选择所属部门" :visible.sync="ischoosedept" width="35%">
          <div class="choose-dialog-main" style="overflow:auto">
            <el-input placeholder="输入关键字进行过滤" size="small" style="width:90%;" v-model="filterdept"></el-input>
            <el-tree
              class="filter-tree"
              node-key  // 每个树节点用来作为唯一标识的属性,整棵树应该是唯一的
              ref="deptref"
              :data="deptlist"  //展示数据
              style="height:250px" 
              :filter-node-method="deptfilter"  //对树节点进行筛选时执行的方法,返回true 表示这个节点可以显示,返回 false 则表示这个节点会被隐藏
              accordion //是否每次只打开一个同级树节点展开
              highlight-current="true" //是否高亮当前选中节点,默认值是 false。
              @node-click="handleNodeClick"  //节点被点击时的回调
              @check-change="aaa"  //节点选中状态发生变化时的回调
              render-after-expand  //是否在第一次展开某个树节点后才渲染其子节点
            ></el-tree>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="add-dialog-footer">
              <div
                class="divbtn"
                style="width:150px;height:30px;line-height:30px;"
                @click="choosedept"
              >确认</div>
              <el-button
                type="default"
                style="width:150px;height:30px;line-height:5px;"
                @click="ischoosedept=false"
              >取消</el-button>
            </div>
          </span>
        </el-dialog>
    

    data()里写:

       ischoosedept: false,
       filterdept: "",
    

    watch: {}:

        filterdept(val) {
          this.$refs.deptref.filter(val);
    

    mounted(){} 渲染生命周期–实例DOM加载完成

     mounted() {
        this.$nextTick(() => {
          // this.loaddepart();
          this.loadperson();
          // this.loaddata();  //查询渲染
        });
      },
    

    methods:{}里写:

     loadperson() {
          let _this = this;
          let comapi = new apicom();
          //获取人员数据
          comapi.getDataByGet("organperson.do", {}, res => {
            _this.deptlist = res.data.data;
          });
        },
      //打开部门模态框
        opendept() {
          this.ischoosedept = true;
        },
        //确认选择部门
        choosedept() {
          this.ischoosedept = false;
        },
          //筛选所属部门
        deptfilter(value, data) {
          if (!value) return true;
          return data.label.indexOf(value) !== -1;
        },
        // 树点击确认收到ID
        handleNodeClick(v, e) {
          // console.log(v.label);
          // console.log(e.parent.data.label);
          // console.log(e.parent.parent.data.label);
          this.searchform.person = v.id;
          this.searchform.dept = e.parent.data.id;
          this.searchform.viw = `${e.parent.parent.data.label}/${e.parent.data.label}/${v.label}`;
        },
    

    后端数据一定要符合格式

    注意:树形控件需要的后端数据格式一定要遵循

     label: '一级 1',
              children: [{
                label: '二级 1-1',
                children: [{
                  label: '三级 1-1-1'
                }]
    

    在这里插入图片描述
    如果不遵循就先在树控件里加

       :props="defaultdata"
    

    然后在data里加

     defaultdata: {
            children: "children",
            label: "name"
          },
    

    多选树!

    ![在这里插入图片描述](https://img-blog.csdnimg.cn/2019121316560155.png?x-oss-process=image/watermark,type_ZmFuZ3p在这里插入图片描述
    树:

     <!--选择所属部门 -->
        <el-dialog title="请选择管理员" :visible.sync="ischoosedept" width="35%">
          <div class="choose-dialog-main" style="overflow:auto">
            <!-- <el-input placeholder="输入关键字进行过滤" size="small" style="width:90%;" v-model="filterdept"></el-input> -->
            <el-tree
              accordion  //是否每次只打开一个同级树节点展开
              class="filter-tree"
              node-key="id"  //使用一些方法必须要id,而且这个id必须写成id!不管多少棵树都是id!
              ref="deptref"  //唯一值
              :data="deptlist"  //绑定的数据
              style="height:250px"
              show-checkbox  //多选
              @check-change="handleCheckChange2"  //点击改变时的回调
            ></el-tree>
          </div>
          <span slot="footer" class="dialog-footer">
            <div class="add-dialog-footer">
              <!-- <div
                class="divbtn"
                style="width:150px;height:30px;line-height:30px;"
                @click="choosedept"
              >确认</div>-->
              <el-button
                type="default"
                style="width:150px;height:30px;line-height:5px;background-color:#71ae86;color:#fff"
                @click="qdd"
              >确认</el-button>
              <el-button
                type="default"
                style="width:150px;height:30px;line-height:5px;"
                @click="ischoosedept=false"
              >取消</el-button>
            </div>
          </span>
        </el-dialog>
    
     watch: {
    
        filterdept(val) {
          console.log("val", val);
    
          this.$refs.deptref.filter(val);
        }
      },
    

    点击勾选初始化未勾选:

    //如果报错可以使用 let _this = this
         this.$nextTick(() => {
              this.$refs.deptref.setCheckedKeys([]);
            });
    

    修改:

     // 修改
        updateOndutyGroup() {
       
    
      //    列表数据赋值
          for (let i = 0; i < this.grouplist.length; i++) {
            if (this.grouplist[i].id == this.currselagid) {
              let groupItem = this.grouplist[i];
              console.log("groupItem", groupItem);
              this.theform.manageids = groupItem.manageids;
              this.theform.agid = groupItem.id;
              this.theform.agname = groupItem.name;
    
       
    			//把当前管理人的数据id获取
              let memberidssss = this.theform.manageids;
              //加判定,防止空值会报错
              if (memberidssss != undefined) {
                memberidssss = this.theform.manageids.toString();
              }
              let getreponse = new api();
              //获取人员数据
              getreponse.getDataByGet(
                "getmembernames.do",
                { memberids: memberidssss },  //把指定id传给后端
                res => {
                  this.input = res.data.data.names;
                  // let a = res.data.data.toString();
                  console.log("管理员人名:", res.data);
                }
              );
    
              //获取组内成员列表
              let thiscom = this;
              thiscom.theform.memberids = [];
              getreponse.getDataByGet(
                "agondutymembers.do",
                { agid: thiscom.theform.agid, to: -1 },
                res => {
                  console.log("成员列表", res.data.data);
    
                  if (res.data.result == "success") {
                    let resultData = res.data.data;
                    for (let j = 0; j < resultData.length; j++) {
                      thiscom.theform.memberids.push(resultData[j].id);
                    }
                  }
    
                  thiscom.dlgvisible = true;
                  thiscom.$nextTick(() => {
                    thiscom.$refs.fullorgantree.setCheckedKeys(
                      thiscom.theform.memberids
                    );
    //             切记要加setTimeout,不然要点开两次才能获取
                    setTimeout(function() {
                      let idddd = thiscom.theform.manageids; //管理人id
                      if (thiscom.theform.manageids != undefined) {
                        thiscom.$refs.deptref.setCheckedKeys(
                          thiscom.theform.manageids
                        );
                      } else {
                        thiscom.$refs.deptref.setCheckedKeys([]);
                      }
                      // console.log(thiscom.theform.manageids);
                    }, 1100);
                  });
                }
              );
              break;
            }
          }
        },
    

    改变树的选中取消

       handleCheckChange2(data, checked, indeterminate) {
       //这一步狠狠狠重要,把选中的数组赋值
          let nodess = this.$refs.deptref.getCheckedNodes();
    
          console.log("nodess", nodess);
          this.glry = nodess;
          console.log("this.glry", this.glry);
    
          console.log("checked", checked);
          console.log("indeterminate", indeterminate);
        },
    

    确定:

      qdd() {
          this.setCheckedNodes();
          let data3 = [];
          let data4 = [];
          let manageidd = [];
          console.log("this.glry", this.glry);
    
          this.glry.map((i, k) => {
            if (i.children != undefined) {
              // console.log("i", i);
    
              // data3.push(i.label);
              for (let b of i.children) {
                data3.push(b.label);
                manageidd.push(b.id);
                data4.push(b.id);
              }
            } else {
              if (data4.includes(i.id) === false) {
                data3.push(i.label);
                manageidd.push(i.id);
              }
            }
    
            console.log("data4", data4);
          });
          console.log(" this.inpu", data3);
    
          this.manageids = manageidd;
          console.log("this.manageids", this.manageids);
          this.input = data3;
    
          this.ischoosedept = false;
        }
    

    懒加载树

    在这里插入图片描述

       <td style="width:15%;">审批人:</td>
                <td style="width:20%;">
                  <el-input size="small" v-model="audituser" @click.native="spr"></el-input>
                  <!-- <el-tree
                    :props="props"
                    :load="loadNode"
                    lazy
                    show-checkbox
                    @check-change="handleCheckChange"
                  ></el-tree>-->
                  <!-- 执行人树 -->
                  <el-dialog title="选择审批人" :visible.sync="dialogVisible01" width="60%" append-to-body>
                    <span slot="footer" class="dialog-footer">
                      <div style="height:200px;overflow-x: hidden;overflow-y: scroll;">
                        <el-tree
                          node-key="id"
                          ref="tree"
                          @node-click="handleNodeClick"
                          highlight-current
                          :props="props"
                          :load="loadNode"
                          @check-change="handleCheckChange2"
                          lazy
                        ></el-tree>
                      </div>
    
                      <el-button @click="dialogVisible01 = false">取 消</el-button>
                      <el-button @click.native="qdd" type="primary">确 定</el-button>
                    </span>
                  </el-dialog>
                </td>
    

    data:

          audituser: "", //审批人显示,不是id
          dialogVisible01: false,
          props: {
            label: "label",
            children: "children"
          },
    
    
    

    mothods:

       spr() {
          this.dialogVisible01 = true;
        },
          // 树点击确认收到ID
        handleNodeClick(v, e) {
          console.log("点击确认v", v);
          // console.log(e.parent.data.label);
          // console.log(e.parent.parent.data.label);
          this.treeid = v.id;
          this.treelabel = v.label;
        },
        // 人员树懒加载
        loadNode: async function(node, resolve) {
          console.log("node", node);
    
          if (node.level === 0) {
            try {
              let { data } = await this.$http.get(`/unitinfo`);
              console.log(data);
              return resolve(data.data);
            } catch (err) {
              console.log(err);
            }
          }
          if (node.level === 1) {
            try {
              let { data } = await this.$http.get(`/unitinfo`);
              console.log(data.data[0]);
              const data1 = data.data[0].children;
    
              resolve(data1);
            } catch (err) {
              console.log(err);
            }
          }
          if (node.level === 2) {
            let data1 = [];
            try {
              let { data } = await this.$http.get(`/unitinfo`);
              console.log("this.treeid", this.treeid);
    
              console.log("node.level === 2", data.data[0].children);
              for (let i in data.data[0].children) {
                if (this.treeid === data.data[0].children[i].id) {
                  console.log(data.data[0].children[i]);
                  data1 = data.data[0].children[i].children;
                }
              }
    
              resolve(data1);
            } catch (err) {
              console.log(err);
            }
          }
          if (node.level === 3) {
            setTimeout(() => {
              console.log("this.treeid", this.treeid);
    
              this.$http({
                method: "get",
                url: `/userInfobyunit?unitid=${this.treeid}`
              })
                .then(function(response) {
                  console.log("老方法", response.data);
                  const data2 = response.data.data;
                  resolve(data2);
                })
                .catch(function(error) {});
            }, 500);
            // try {
            //   let { data } = await this.$http.get(
            //     `/organperson/${this.treeid}`
            //     // `http://www.mocky.io/v2/5e6c753b2e000058000ee9e1`
            //   );
            //   console.log(data);
            //   const data2 = data;
    
            //   resolve(data2);
            // } catch (err) {
            //   console.log(err);
            // }
          }
          if (node.level > 3) return resolve([]);
        },
        //人员树确定
        qdd() {
          this.form.audituserid = this.treeid;
          this.audituser = this.treelabel;
          console.log("this.audituser", this.audituser);
          this.dialogVisible01 = false;
        },
         handleCheckChange2(data, checked, indeterminate) {
          //这一步狠狠狠重要,把选中的数组赋值
          let nodess = this.$refs.tree.getCheckedNodes();
    
          console.log("nodess", nodess);
          this.glry = nodess;
          console.log("this.glry", this.glry);
    
          console.log("checked", checked);
          console.log("indeterminate", indeterminate);
        },
    

    拖拽树

         <el-tree
                  :data="datatree"
                  node-key="id"
                  ref="tree"
                  highlight-current
                  :props="defaultProps"
                  draggable
                  @node-click="handleNodeClick"
                  :allow-drop="allowDrop"
                  @node-drag-start="handleDragStart"
                  @node-drop="handleDrop"
                  :default-expanded-keys="mrzz"
                  accordion="fasle"
                >
                  <span class="custom-tree-node" slot-scope="{ node }">
                    <span>
                      <img style="width: 12px;" :src="fenlei" alt />
                      {{ node.label }}
                    </span>
                  </span>
                </el-tree>
    
     // 点击目录
        handleNodeClick(data) {
          this.sondata = data;
          this.gxname = data.label;
          this.sonid = data.id;
          this.sonparentId = data.id;
        },
           // 防止跨级拖动
        allowDrop(draggingNode, dropNode, type) {
          if (draggingNode.level === dropNode.level) {
            if (draggingNode.parent.id === dropNode.parent.id) {
              // 向上拖拽 || 向下拖拽
              return type === "prev" || type === "next";
            }
          } else {
            // 不同级进行处理
            return false;
          }
        },
        // 节点开始拖拽时触发的事件
        handleDragStart(node, ev) {
          this.startnum = 0;
          this.orderid = "";
          this.startnum = node.data.seq; //开始顺序号
          this.orderid = node.data.id; //移动的id
          this.orderparentId = node.data.parentId; //父级id
        },
        // 拖拽成功完成时触发的事件
        handleDrop(draggingNode, dropNode, dropType, ev) {
          this.endnum = 0;
          this.endnum = dropNode.data.seq;
          this.order();
        },
        // 调用顺序
        async order() {
          let _this = this;
          let form = {};
          form.firstseq = _this.startnum;
          form.directoryid = _this.orderid;
          form.afterseq = _this.endnum;
          form.parentid = _this.orderparentId;
          try {
            let { data } = await _this.$http.post("/ordertemplate", form);
            if (data.code == 200) {
              _this.sonmenu();
            }
          } catch (error) {}
        }
    
    展开全文
  • vue中elementUI 形表格如何默认展开? //需要在vue的updated周期函数中调用methods里的方法 否则methods里面获取不到页面元素 updated(){ this.expandAll() }, methods: { //获取到页面元素 模拟点击可实现让...
  • elementUI树组件

    2020-12-21 21:19:27
    组件 <template> <div> <el-autocomplete ref="searchInput" v-model="searchData" :fetch-suggestions="querySearch" :placeholder="treeProps.placeholder" :size="treeProps.size" ...el-t
  • elementui 形控件 默认选中的子树显示颜色 html <el-tree v-if="isShowTree" :data="data" ref="tree" :props="defaultProps" :highlight-current="true" :current-node-key="this.nodeId" node-key="nodeId" :...
  • 一、elementui树表格使用checkbox并自动勾选 1、html,要使用默认checkbox的type 2、递归找出树长度、动态绑定 3、根据点击获取的数据、勾选树表格,getcheckedcopy_是拆开树数据变为没有层级的 ...
  • 需求:编辑回显数据后,禁用形结构复选框,不可选中,无复选框也不可选中:props="defaultProps" highlight-current :expand-on-click-node="autoNode"> //disabled阻断tab切换:props="defaultProps" highlight-...
  • elementUI增加部门本部节点,且滑动过程中本部需要吸顶,具体实现效果图如下: 实现代码分享: html部分: <div class="researchWork first"> <!-- 左边,固定定位 --> <div class="left-...
  • elementUI树形控件+面包屑导航+页面图标点击联动 需求是做一个类似网盘的界面,需要有左侧的树形控件,顶部的面包屑导航以及内容部分有文件夹和文件 页面效果图: 点击文件: 点击添加: 首先是树形控件代码: &...
  • elementui树形结构组件

    千次阅读 2019-12-27 16:30:49
    这样的 又或者带选择框的 2.代码实现 因为这个不仅是展示上面的节点。我还需要对它进行一些需求操作 这就意味着,我不能通过调用接口来刷新这颗。否则,你想再定位到之前你点的那个节点就找不到了。因为你...
  • elementUI树形组件添加连线和自定义图标

    千次阅读 热门讨论 2020-03-01 15:51:34
    1.elementUI形组件官网样例节点之间是没有连线的,想要实现如下图节点之间出现连线需要自己定义形插件的样式覆盖el-tree内部的样式类 首先要给el-tree添加两个样式类 一个添加到el-tree本身的class上,另外...
  • elementUI树控件搜索框

    千次阅读 2019-07-11 15:29:00
    HTML:(el-tree中的关键是:filter-node-method="filterNode"值为过滤函数) JS: 转载于:https://www.cnblogs.com/yccg990118/p/11170305.html
  • elementui: v2.12.0 主要方法: toggleRowExpansion 方法名 说明 参数 toggleRowExpansion 用于可展开表格与形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 ...
  • elementUI树形控件Tree

    2019-02-28 16:56:00
    编辑功能初始化数据:  应用属性 default-checked-keys 给Tree节点赋默认值(赋值数据为节点数组Arr)前,应先清空数组Arr,并且配合使用this.$refs.tree.setCheckedKeys([])。 转载于:...
  • 实现把一个的结点拖拽至另一个上,主要用的是vue+elemenui。 先放一下效果图。 以下是实现的代码。 <template> <div> <el-row> <el-col :span="12"> <div > <el-tree :...
  • ElementUI树形控件报错问题解决

    千次阅读 2018-06-13 10:43:04
    ElementUI 2.4.1版本中,使用Tree形控件中的自定义控件时,运行npm run dev,产生报错信息 Syntax Error: Unexpected token (114:5) 112 | renderContent(h, { node, data, store }) { 113 | return ( &...
  • <el-tree ref="treeBox" :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[heightKey]" :props="defaultProps"> <... return {
  • 两个一定要搭配使用 node-key="id" :default-expanded-keys="isArr" ``` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191205111459285.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,...
  • <el-tree :data="treeDate" show-checkbox node-key="id" ref="tree" :default-expanded-keys="[1,2,3,4,5]" :props="defaultProps" :default-checked-keys="checkedKeys" @check="checks" ...
  • vue + elementUI 形菜单的递归组件

    千次阅读 2019-04-28 13:02:18
    一个不知道会嵌套多少次的形菜单,如果用 if 一层一层往下判断的话那真是要了命了,不灵活不易维护不说,还最容易出错。 比如像下面这种形结构: 如果里面有九层十几层,我们也需要一级一级的判断吗...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 631
精华内容 252
关键字:

elementui树