element 使用总结

一,  vue_elementUI_ tree树形控件


1.默认点击tree节点的第一个(注意不是checked选中)

 

<el-tree :data="fileData" @node-click="treeClick" :highlight-current="true" 
         :expand-on-click-node="false" node-key="id" default-expand-all 
         @node-drop="handleDrop" ref="fileTree" draggable>
    <span slot-scope="{ node, data }">
          <span class="task_left_bottom_img">
                <img :src="fileDataIcon">
                {{ node.label }}
          </span>
   </span>
 </el-tree>

 

@node-click 点击事件 :highlight-current高亮  :expand-on-click-node点击展开按钮展开点击行不展开  
node-key id作为唯一标识 default-expand-all 默认全部展开  @node-drop 拖拽事件 draggable 可拖拽  ref tree的唯一标识

1，添加高亮属性     :highlight-current="true"
2，添加tree的“ref”属性 ref="treeBox"
3，添加唯一标识的字段  node-key="id"
4，设置默认选中

let para = {keyword: this.searchFileData};
taskFileList(para).then(res => {
    if(res.data.code == 200) {
       this.fileData = res.data.model;
       this.$nextTick(() => {
           this.$refs.fileTree.setCurrentKey(this.fileData[0].id);
        });this.loadList();
     } else {
         this.$notify({
              title: "错误",
              message: res.data.msg,
              type: "error"
         });
     }
});

 

 

 

 

 

 

2. 获取选中的父节点ID

el-tree 的 this.$refs.tree.getCheckedKeys() 只可以获取选中的id 无法获取选中的父节点ID
想要获取选中父节点的id;需要如下操作
1. 找到工程下的node_modules文件夹 然后查找 element-ui.common.js文件
    node_modules\element-ui\lib\element-ui.common.js
2. 按Ctrl+F搜索TreeStore.prototype.getCheckedKeys这个方法
3. 把
// if (child.checked && (!leafOnly || leafOnly && child.isLeaf)) {
//   checkedNodes.push(child.data);
// }
改为

if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
    checkedNodes.push(child.data);
}

如下图：




二,input type校验

 1 <el-form-item label="路由转发地址" prop="url" >
 2        <el-input v-model="addForm.url"></el-input>
 3  </el-form-item>
 4 
 5 url: [{
 6     required: true,
 7     message: "请输入路由转发地址",
 8     trigger: "blur"
 9 }, {
10     type: 'url',
11     message: '请输入正确的地址',
12     trigger: 'blur'
13 }],

 

转载于:https://www.cnblogs.com/zhaozhenzhen/p/9449510.html