qtreeview 点击二级节点弹出dialog_在树节点上填上按钮结合Vue和ElementUI

在树节点上填上按钮结合Vue和ElementUI

1. span标签代表按钮

   expand-on-click-node

   ：是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

   show-checkbox node-key

   ：展示复选框，以及复选框的id。

   :default-expanded-keys

   ="expanded"冒号代表是v-bind的缩写,是为了动态绑定数据，这个属性说明默认打开第一个树节点，因为绑定数据是一个变量，需要在data数据方法中写好

	data() {
    
        return {
    
          category:{name:"",parentCid:0,catLevel:0,showStatus:1,sort:0},
          dialogVisible:false,
          menus: [],
          expanded:[],
          defaultProps: {
    
            children: 'children',
            label: 'name'
          }
        };
      },

下面是树的点击按钮

<el-tree :data="menus" :props="defaultProps" :expand-on-click-node="false" show-checkbox node-key="catId" :default-expanded-keys="expanded">
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{
    { node.label }}span>
<span>

<el-buttonv-if="node.level<=2"type="text"size="mini"@click="() => append(data)">
               添加
el-button>

<el-buttonv-if="node.childNodes.length==0"type="text"size="mini"@click="() => remove(node, data)">
               删除
el-button>
span>
span>
el-tree>

2. 在methods的方法体中写上请求后台的方法。
   这里的

   this.$http

   方法是封装请求后台的，详细见项目中的httpRequest.js文件。

      methods: {
    
        // 树节点的添加
        append(data) {
    
          console.log("append"+data)
          this.dialogVisible = true;
          //点击当前的id
          this.category.parentCid = data.catId;
          // 得到下一个的层级先乘1是防止是字符串
          this.category.catLevel = data.catLevel*1 + 1;
        },
        //添加的方法
        addCategory(){
    
          console.log("提交的三级分类的数据是:"+this.category.name)
          this.$http({
    
            url: this.$http.adornUrl('/product/category/save'),
            method: 'post',
            data: this.$http.adornData(this.category, false)