element 使用总结(1. tree使用 2. table修改滚动条样式 3. el-form 自定义label添加icon)

一,  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);
// }
改成
this.$refs.tree.getCheckedKeys()element-ui.common.js文件

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

以下图：




二,table滚动条样式修改

//el-table 修改滚动条样式开始
.tableBoxs .el-table__body-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
//滚动条的滑块
.tableBoxs .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #D5D5D5;
    border-radius: 4px;
}
//el-table 修改滚动条样式结束

 

 

 

el-form  自定义label添加icon

<el-form :model="addForm" :rules="addFormRules" ref="addForm">
    <el-row>
        <el-col :span="12">
               <el-form-item prop="name" label-width="90px">
                    <span slot="label" style="position: relative;">
                          <span>菜单名称</span>
                          <el-tooltip  content="支持汉字、英文字母、数字、英文格式的下划线，且必须以字母或汉字开始" placement="top" effect="light" popper-class="addTooltip">
                              <i class="el-icon-question" style="position: absolute;right: -10px;"></i>
                          </el-tooltip>
                    </span>
                    <el-input v-model.trim="addForm.name" placeholder="请输入菜单名称" style="width:100%;"></el-input>
                </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="英文名称" prop="enName" label-width="90px">
                     <el-input v-model.trim="addForm.enName" placeholder="请输入英文名称"></el-input>
              </el-form-item>
          </el-col>
   </el-row>

</el-form>