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>