vue之el-tree懶加載數(shù)據(jù)并且實(shí)現(xiàn)樹的過濾問題
vue el-tree懶加載數(shù)據(jù)并且實(shí)現(xiàn)樹的過濾
樹的樣式：
過濾效果：
過濾代碼實(shí)現(xiàn)：
1，如果這里的樹數(shù)據(jù)是全加載，即可使用element-ui中的設(shè)置，進(jìn)行前端過濾。
<el-input
placeholder="輸入關(guān)鍵字進(jìn)行過濾"
v-model="filterText">
</el-input>
<el-tree
class="filter-tree"
:data="data"
:props="defaultProps"
default-expand-all
:filter-node-method="filterNode"
ref="tree">
</el-tree>
// 監(jiān)聽輸入框中的數(shù)據(jù)
watch: {
filterText(val) {
this.$refs.tree.filter(val);
}
},
methods: {
filterNode(value, data) {
if (!value) return true;
return data.label.indexOf(value) !== -1;
}
},
2，如果這里的樹數(shù)據(jù)是懶加載，，需要使用后端的模糊加載，返回搜索到的樹的節(jié)點(diǎn)。
重要的是:filter-node-method=“filterNode”，這個(gè)屬性
<el-input placeholder="請(qǐng)輸入搜索內(nèi)容" v-model="filterText" class="inputStyle" clearable> </el-input>
<el-tree
:data="treeData"
node-key="id"
:filter-node-method="filterNode"
ref="dimTree"
:props="treeDataDefaultProp"
class="tree_Style"
:expand-on-click-node="false"
:load="loadNode"
lazy
></el-tree>
data(){
return {
filterText: '',
keyword:'',
}
}
watch: {
// 樹節(jié)點(diǎn)的過濾
filterText(val) {
this.keyword = val
this.getTreeData()
}
methods：{
// 將keyword傳入到接口中，從后端返回模糊匹配后的節(jié)點(diǎn)，然后賦值給樹綁定的數(shù)據(jù)變量，即可完成。
// 得到樹的列表
async getTreeData() {
const param = {
type: Number(this.cateTabActive),
keyword: this.keyword
};
const res = await this.$api.get('/api/category', param);
if (res.code == 200) {
this.treeData = res.info;
} else {
return false;
}
},
}
Element el-tree懶加載問題
本文章項(xiàng)目項(xiàng)目全程使用Vue2和Element2！
懶加載：點(diǎn)擊節(jié)點(diǎn)時(shí)才進(jìn)行該層數(shù)據(jù)的獲取。
注意：使用了懶加載之后，一般情況下就可以不用綁定:data。
基礎(chǔ)使用
懶加載需要再指定一個(gè)lazy和懶加載數(shù)據(jù)的方法:load：
<template>
?? ?<el-tree :props="props" :load="loadNode" lazy></el-tree>
</template>
<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? props: { // 映射配置
? ? ? ? ? label: 'name', // 將獲取數(shù)組中的name作為顯示節(jié)點(diǎn)（label）進(jìn)行展示
? ? ? ? ? children: 'zones', // 將獲取數(shù)組中的zones作為子節(jié)點(diǎn)（children）的展示
? ? ? ? ? isLeaf: 'leaf' // 將獲取數(shù)組中的leaf作為判斷是否是葉子節(jié)點(diǎn)（即沒有子節(jié)點(diǎn)的最底層節(jié)點(diǎn)）
? ? ? ? },
? ? ? };
? ? },
? ? methods: {
? ? ? loadNode(node, resolve) { // 懶加載數(shù)據(jù)時(shí)載入的方法，只會(huì)執(zhí)行一次
? ? ? ? if (node.level === 0) { // 初始的級(jí)數(shù)（最頂層）
? ? ? ? ? return resolve([{ name: 'region' }]); // 最頂層數(shù)據(jù)渲染為region
? ? ? ? }
? ? ? ? if (node.level > 1) return resolve([]);
? ? ? ? setTimeout(() => {
? ? ? ? ? const data = [{
? ? ? ? ? ? name: 'leaf',
? ? ? ? ? ? leaf: true
? ? ? ? ? }, {
? ? ? ? ? ? name: 'zone'
? ? ? ? ? }];
? ? ? ? ? resolve(data);
? ? ? ? }, 500);
? ? ? }
? ? }
? };
</script>懶加載的方法會(huì)得到兩個(gè)參數(shù)，一個(gè)是獲取的當(dāng)前節(jié)點(diǎn)（node）的信息（包括它的層級(jí)數(shù)據(jù)等）；另一個(gè)是一個(gè)重新渲染當(dāng)前節(jié)點(diǎn)下子節(jié)點(diǎn)的方法（resolve），它接收一個(gè)數(shù)組，該數(shù)組也會(huì)按照props中的映射關(guān)系，進(jìn)行顯示。
注意：懶加載的方法（:load）在初始載入時(shí)執(zhí)行一次，而后每次點(diǎn)擊節(jié)點(diǎn)前面的箭頭獲取子節(jié)點(diǎn)的時(shí)候再次觸發(fā)；即使初始載入的數(shù)據(jù)有變換也不會(huì)再觸發(fā)，點(diǎn)擊展開子節(jié)點(diǎn)后再次點(diǎn)擊收縮節(jié)點(diǎn)時(shí)也不會(huì)再觸發(fā)！！
由于懶加載是一級(jí)一級(jí)往下獲取，所以對(duì)每一級(jí)來說都要使用resolve來渲染它顯示的子節(jié)點(diǎn)，如果該節(jié)點(diǎn)下沒有顯示的內(nèi)容，它則會(huì)一直轉(zhuǎn)圈，這個(gè)時(shí)候需要設(shè)置resolve返回一個(gè)空數(shù)組，這樣如果它沒有獲取到子節(jié)點(diǎn)的內(nèi)容則會(huì)在轉(zhuǎn)圈之后顯示為空（并去掉前面的向下展開的箭頭），不會(huì)一直轉(zhuǎn)圈：
return resolve([]);
現(xiàn)實(shí)場(chǎng)景：可以在通過node取到每一層的id，根據(jù)這個(gè)id調(diào)用接口得到數(shù)據(jù)。再通過resolve進(jìn)行回顯，回顯的數(shù)據(jù)為這個(gè)id的子節(jié)點(diǎn)
二次封裝
場(chǎng)景：由于用到樹形控件的地方很多，而且需要顯示的數(shù)據(jù)都不一樣，所以將樹形控件再封裝一層，然后根據(jù)外部組件傳來的不同參數(shù)，進(jìn)行樹形圖的不同顯示。
思路：通過監(jiān)聽外部傳入數(shù)據(jù)的變化，重新渲染樹，完成不同數(shù)據(jù)的顯示；但是:load只會(huì)初始加載一次并獲取當(dāng)前綁定樹上node，如果后面監(jiān)聽數(shù)據(jù)的時(shí)候再次調(diào)用loadTree是獲取不到它的node和resolve，所以會(huì)導(dǎo)致渲染失敗。這個(gè)時(shí)候可以通過:data顯示數(shù)據(jù)，當(dāng)我們樹上有節(jié)點(diǎn)時(shí)，就可以正常觸發(fā):load進(jìn)行子節(jié)點(diǎn)的懶加載了。具體實(shí)現(xiàn)如下：
<template>
? <div class="org-tree">
? ? <el-tree :data="orgList" :props="defaultProps" lazy :load="loadTree" :expand-on-click-node="false" @node-click="nodeClick">
? ? </el-tree>
? </div>
</template>
<script>
? ? export default {
? ? ? ? name: 'Tree',
? ? ? ? props: {
? ? ? ? ? ? logicParams: { // 外部組件傳入的參數(shù)
? ? ? ? ? ? ? ? type: Object
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? watch: {
? ? ? ? ? ? logicParams: {
? ? ? ? ? ? ? ? handler(newVal) {
? ? ? ? ? ? ? ? ? ? this.logicParams = newVal;
? ? ? ? ? ? ? ? ? ? if (this.circleI >0) { // 限制首次加載時(shí)只顯示loadTree加載的樹，而不是:data和loadTree加載的都有
? ? ? ? ? ? ? ? ? ? ? ? this.resetNode();
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? this.circleI++;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? immediate: true,
? ? ? ? ? ? ? ? deep: true
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? defaultProps: {
? ? ? ? ? ? ? ? ? ? children: 'children',
? ? ? ? ? ? ? ? ? ? label: 'name',
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? circleI: 0,
? ? ? ? ? ? ? ? orgList: []
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? // 懶加載加載方法，首次加載樹的時(shí)候會(huì)被觸發(fā)
? ? ? ? ? ? loadTree(node, resolve) {
? ? ? ? ? ? ? listByTree(this.logicParams).then(res => {
? ? ? ? ? ? ? ? // this.rootNode = node;
? ? ? ? ? ? ? ? // this.rootResolve = resolve;
? ? ? ? ? ? ? ? let rootMainResolve = resolve;
? ? ? ? ? ? ? ? let treedata = [];
? ? ? ? ? ? ? ? if(node.level == 0) {
? ? ? ? ? ? ? ? ? return resolve([{ name: res.data[0].name }])
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if (node.level == 1 ) {
? ? ? ? ? ? ? ? ? treedata.push(res.data)
? ? ? ? ? ? ? ? ? return resolve(...treedata)
? ? ? ? ? ? ? ? };
? ? ? ? ? ? ? ? if (node.data.isParent && node.data.pId != '') {
? ? ? ? ? ? ? ? ? this.getChild(node.data, node.data.pId, rootMainResolve)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else ?{
? ? ? ? ? ? ? ? ? return resolve([]) // 防止不停轉(zhuǎn)圈
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? getChild(data, type, resolve) { // 每個(gè)節(jié)點(diǎn)使用同一個(gè)接口獲取子節(jié)點(diǎn)，只是傳入的參數(shù)不同，將其抽出來
? ? ? ? ? ? ? this.logicChildDataParam.id =data.id;
? ? ? ? ? ? ? this.logicChildDataParam.type = type+ ";;;";
? ? ? ? ? ? ? listByTree(this.logicChildDataParam).then(res => {
? ? ? ? ? ? ? ? return resolve(res.data);?
? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? // 重新渲染樹的根節(jié)點(diǎn)
? ? ? ? ? ? resetNode() {
? ? ? ? ? ? ? listByTree(this.logicParams).then(res => {
? ? ? ? ? ? ? ? ? this.orgList = [res.data[0]]
? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>數(shù)據(jù)回顯
場(chǎng)景：在懶加載的樹上設(shè)置復(fù)選框，需要將之前添加好的懶加載選中的部分在表格的編輯中回顯出來。
思路：由于懶加載的數(shù)據(jù)是一級(jí)一級(jí)獲取的，所以可以利用default-expanded-keys和default-checked-keys屬性，將需要進(jìn)行回顯的節(jié)點(diǎn)在渲染樹的時(shí)候就設(shè)置上去。（注意在使用這兩個(gè)屬性的時(shí)候）
<template>
? <div class="org-tree">
? ? <el-tree ref="tree" :props="defaultProps" lazy :load="loadTree" :expand-on-click-node="false"?
? ? show-checkbox ?@check-change="checkChange" :default-expanded-keys="defaultExpandKeys" :default-checked-keys="defaultCheckedKeys" node-key="id">
? ? </el-tree>
? </div>
</template>
<script>
? ? export default {
? ? ? ? name: 'OrgTree',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? defaultExpandKeys: [],
? ? ? ? ? ? ? ? defaultCheckedKeys: []
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? ?// 當(dāng)節(jié)點(diǎn)選中或取消選中的時(shí)候觸發(fā)，可接受三個(gè)參數(shù)（具體見官網(wǎng)，本項(xiàng)目只用觸發(fā)這個(gè)事件的時(shí)機(jī)）
? ? ? ? ? ? checkChange(data，state，childChecked) {
? ? ? ? ? ? ? ? let selectedAllList = [];
? ? ? ? ? ? ? ? let checkedList = [];
? ? ? ? ? ? ? ? // 選中所有的節(jié)點(diǎn)，包括半選節(jié)點(diǎn)（用作展開的節(jié)點(diǎn)）
? ? ? ? ? ? ? ? selectedAllList = this.$refs.tree.getCheckedNodes(false,true);
? ? ? ? ? ? ? ? // 選中所有全選節(jié)點(diǎn)，不包括半選（用作選中的節(jié)點(diǎn)）
? ? ? ? ? ? ? ? checkedList = this.$refs.tree.getCheckedNodes()；
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? // 觸發(fā)父組件方法，將這兩個(gè)數(shù)組傳遞出去，并在父組件的添加點(diǎn)擊事件中調(diào)用添加方法，添加時(shí)需拿到這兩個(gè)節(jié)點(diǎn)數(shù)組用作數(shù)據(jù)的回顯
? ? ? ? ? ? ? ? this.$emit('selectorg', selectedAllList, checkedList);
? ? ? ? ? ? },
? ? ? ? ? ? loadTree(node, tree) {
? ? ? ? ? ? ? ? if (node.level == 0) {
? ? ? ? ? ? ? ? ? ? let che = [];
? ? ? ? ? ? ? ? ? ? let exp = [];
? ? ? ? ? ? ? ? ? ? // 此處的checkedList和selectedAllList是通過調(diào)用編輯接口獲取到的數(shù)據(jù)，為了方便理解寫做與checkChange中一樣，以下是偽代碼
? ? ? ? ? ? ? ? ? ? checkedList.forEach(el => { // 遍歷選中的節(jié)點(diǎn)數(shù)組，拿到它們的id
? ? ? ? ? ? ? ? ? ? ? ? if (el.id) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? che.push(el.id);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? selectedAllList.forEach(el => { // 遍歷包括半選的節(jié)點(diǎn)數(shù)組，拿到它們的id（可以將半選節(jié)點(diǎn)都篩出來，將所有半選節(jié)點(diǎn)作為展開的節(jié)點(diǎn)，如果嫌麻煩可以將全選的接節(jié)點(diǎn)也展開，不過這樣可能會(huì)在樹的數(shù)據(jù)量過多的情況下出現(xiàn)延遲和卡頓，影響性能）
? ? ? ? ? ? ? ? ? ? ? ? if (el.id) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? exp.push(el.id);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? this.defaultCheckedKeys = che; // 將得到的回顯節(jié)點(diǎn)數(shù)組賦值給默認(rèn)選中的數(shù)組
? ? ? ? ? ? ? ? ? ? this.defaultExpandKeys = exp; // 將得到的展開節(jié)點(diǎn)數(shù)組賦值給默認(rèn)展開的數(shù)組
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>回顯問題
場(chǎng)景：在使用懶加載進(jìn)行數(shù)據(jù)回顯時(shí)，當(dāng)添加選中的數(shù)據(jù)里存在以下情況：一個(gè)父節(jié)點(diǎn)下的第一和第二個(gè)子節(jié)點(diǎn)同時(shí)被選中，回顯時(shí)得到的默認(rèn)選中的節(jié)點(diǎn)數(shù)組里也只有這兩個(gè)節(jié)點(diǎn)的id，但是最終懶加載回顯的數(shù)據(jù)是這個(gè)父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)全都被選中（獲取其他類似情況）。
分析：由于懶加載的樹是異步加載的，樹在判斷子節(jié)點(diǎn)是否選中的時(shí)候可能由于選中的子節(jié)點(diǎn)，而導(dǎo)致其父節(jié)點(diǎn)因?yàn)殛P(guān)聯(lián)而被計(jì)算判斷出選中。
解決一：如果不需要父節(jié)點(diǎn)的復(fù)選框，或者父節(jié)點(diǎn)沒有復(fù)選框，只有子節(jié)點(diǎn)有，或者不需要父子節(jié)點(diǎn)關(guān)聯(lián)的情況下，可以使用check-strictly屬性，斷開父子之間的連接：
<template>
? <div class="org-tree">
? ? <el-tree ref="tree" :props="defaultProps" lazy :load="loadTree" :expand-on-click-node="false"?
? ? show-checkbox ?@check-change="checkChange" :default-expanded-keys="defaultExpandKeys" :default-checked-keys="defaultCheckedKeys" node-key="id" :check-strictly="checkStrictly">
? ? </el-tree>
? </div>
</template>
<script>
? ? export default {
? ? ? ? name: 'OrgTree',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? checkStrictly: true, // 根據(jù)需要在可不同的位置定義
? ? ? ? ? ? }
? ? ? ? }
</script>解決二：對(duì)選中節(jié)點(diǎn)的回顯不使用default-checked-keys，而是利用$nextTick和setCheckedKeys設(shè)置節(jié)點(diǎn)的選中，此方法必須設(shè)置node-key屬性：
<template>
? <div class="org-tree">
? ? <el-tree ref="tree" :props="defaultProps" lazy :load="loadTree" :expand-on-click-node="false"?
? ? show-checkbox ?@check-change="checkChange" :default-expanded-keys="defaultExpandKeys" :default-checked-keys="defaultCheckedKeys" node-key="id">
? ? </el-tree>
? </div>
</template>
<script>
? ? export default {
? ? ? ? name: 'OrgTree',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? defaultExpandKeys: [],
? ? ? ? ? ? ? ? defaultCheckedKeys: []
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? ?// 當(dāng)節(jié)點(diǎn)選中或取消選中的時(shí)候觸發(fā)，可接受三個(gè)參數(shù)（具體見官網(wǎng)，本項(xiàng)目只用觸發(fā)這個(gè)事件的時(shí)機(jī)）
? ? ? ? ? ? checkChange(data，state，childChecked) {
? ? ? ? ? ? ? ? let selectedAllList = [];
? ? ? ? ? ? ? ? let checkedList = [];
? ? ? ? ? ? ? ? // 選中所有的節(jié)點(diǎn)，包括半選節(jié)點(diǎn)（用作展開的節(jié)點(diǎn)）
? ? ? ? ? ? ? ? selectedAllList = this.$refs.tree.getCheckedNodes(false,true);
? ? ? ? ? ? ? ? // 選中所有全選節(jié)點(diǎn)，不包括半選（用作選中的節(jié)點(diǎn)）
? ? ? ? ? ? ? ? checkedList = this.$refs.tree.getCheckedNodes()；
? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? // 觸發(fā)父組件方法，將這兩個(gè)數(shù)組傳遞出去，并在父組件的添加點(diǎn)擊事件中調(diào)用添加方法，添加時(shí)需拿到這兩個(gè)節(jié)點(diǎn)數(shù)組用作數(shù)據(jù)的回顯
? ? ? ? ? ? ? ? this.$emit('selectorg', selectedAllList, checkedList);
? ? ? ? ? ? },
? ? ? ? ? ? loadTree(node, tree) {
? ? ? ? ? ? ? ? if (node.level == 0) {
? ? ? ? ? ? ? ? ? ? let che = [];
? ? ? ? ? ? ? ? ? ? let exp = [];
? ? ? ? ? ? ? ? ? ? // 此處的checkedList和selectedAllList是通過調(diào)用編輯接口獲取到的數(shù)據(jù)，為了方便理解寫做與checkChange中一樣，以下是偽代碼
? ? ? ? ? ? ? ? ? ? selectedAllList.forEach(el => { // 遍歷包括半選的節(jié)點(diǎn)數(shù)組，拿到它們的id
? ? ? ? ? ? ? ? ? ? ? ? if (el.id) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? exp.push(el.id);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? this.defaultExpandKeys = exp; // 將得到的展開節(jié)點(diǎn)數(shù)組賦值給默認(rèn)展開的數(shù)組
? ? ? ? ? ? ? ? ? ? this.$nextTick(() => { // 利用$nextTick更新節(jié)點(diǎn)
? ? ? ? ? ? ? ? ? ? ? ? checkedList.forEach(el => { // 遍歷選中的節(jié)點(diǎn)數(shù)組，拿到它們的id
? ? ? ? ? ? ? ? ? ? ? ? if (el.id) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? che.push(el.id);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ?? ?})
? ? ? ? ? ? ? ? ? ? ? ? this.$refs.tree.setCheckedKeys(che); // 手動(dòng)賦值節(jié)點(diǎn)?
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? }
? ? }
</script>注意：該方法因?yàn)樵趌oad方法中，所以每次觸發(fā)load的時(shí)候（每次首次下拉節(jié)點(diǎn)）都會(huì)重新獲取一邊數(shù)據(jù)，這會(huì)導(dǎo)致之前可能選中的節(jié)點(diǎn)又被回顯節(jié)點(diǎn)重置了。
這種情況如果在層級(jí)沒有超過2級(jí)時(shí)，可以通過設(shè)置一個(gè)計(jì)數(shù)器，讓這個(gè)$nextTick只執(zhí)行一次，但是如果層級(jí)過多，下層還是會(huì)出現(xiàn)全選的情況。這個(gè)問題我暫時(shí)無法避免，所以綜合考慮下來還是采用每執(zhí)行一次load就執(zhí)行一次$nextTick，這樣可以保證更深的層級(jí)節(jié)點(diǎn)能正確顯示，對(duì)于回顯編輯來說，只要做到先下拉節(jié)點(diǎn)再選擇，就不會(huì)出錯(cuò)了。
復(fù)選框顯隱
場(chǎng)景：現(xiàn)在需要去掉所有的葉子節(jié)點(diǎn)（沒有子節(jié)點(diǎn)的節(jié)點(diǎn)）的復(fù)選框，默認(rèn)選中了父節(jié)點(diǎn)則其下所有子節(jié)點(diǎn)都 不做判斷。
思路：由于element的tree并未提供這個(gè)屬性或方法，需要我們自己手動(dòng)去修改element內(nèi)部代碼，然后再重新打包，將打好的包替換自己項(xiàng)目中element里的ilb文件夾：
將對(duì)應(yīng)版本的element源碼下載下來，安裝依賴并查看項(xiàng)目是否啟動(dòng)成功：
npm install npm run dev
運(yùn)行成功后找到packages/tree/src/tree-node修改源碼：
<template>
? <div class="el-tree-node">
? ? ...?
? ? ? <!-- 找到復(fù)選框的位置，根據(jù)node.data中的某個(gè)字段判斷（我是根據(jù)isParent判斷）設(shè)置復(fù)選框的顯隱 -->
? ? ? <el-checkbox
? ? ? ? v-if="showCheckbox"
? ? ? ? v-model="node.checked"
? ? ? ? :style="{ 'display': node.data.isParent || node.parent == null ?'':'none'}"
? ? ? ? :indeterminate="node.indeterminate"
? ? ? ? :disabled="!!node.disabled"
? ? ? ? @click.native.stop
? ? ? ? @change="handleCheckChange"
? ? ? >
? ? ? </el-checkbox>
? ? ...
? </div>
</template>源碼修改好之后，進(jìn)行打包：
npm run dist
打包完成之后會(huì)得到新的lib文件夾，將其替換自己項(xiàng)目中的對(duì)應(yīng)位置的lib文件夾即可。
注意：直接修改自己項(xiàng)目中的packages里的代碼是無效的，因?yàn)轫?xiàng)目中所運(yùn)行的是lib文件夾里的，packages只是方便查看內(nèi)部源碼！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析
這篇文章主要介紹了Vue中的數(shù)據(jù)監(jiān)聽和數(shù)據(jù)交互案例解析,在文章開頭部分先給大家介紹了vue中的數(shù)據(jù)監(jiān)聽事件$watch，具體代碼講解，大家可以參考下本文2017-07-07
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05
這篇文章主要介紹了vue 子組件和父組件傳值的示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-09-09
使用vue的v-for生成table并給table加上序號(hào)的實(shí)例代碼
這篇文章主要介紹了使用vue的v-for生成table并給table加上序號(hào)的相關(guān)資料,需要的朋友可以參考下2017-10-10
Vue+element 解決瀏覽器自動(dòng)填充記住的賬號(hào)密碼問題
我們?cè)谧鰂orm表單的時(shí)候,會(huì)發(fā)現(xiàn),瀏覽器會(huì)自動(dòng)的將我們之前保存的密碼,自動(dòng)的填充到表單中input 為 type="password" 的框中，如何實(shí)現(xiàn)此功能呢，下面小編給大家介紹下，感興趣的朋友一起看看吧2019-06-06
vue3.0報(bào)錯(cuò)Cannot?find?module‘worker_threads‘的解決辦法
這篇文章介紹了vue3.0報(bào)錯(cuò)Cannot?find?module‘worker_threads‘的解決辦法。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)3
這篇文章主要為大家詳細(xì)介紹了Vue數(shù)據(jù)驅(qū)動(dòng)模擬實(shí)現(xiàn)，教大家如何在某個(gè)對(duì)象中，新增某個(gè)屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Vue+Element實(shí)現(xiàn)封裝抽屜彈框
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Element實(shí)現(xiàn)簡(jiǎn)單的抽屜彈框效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
vue使用v-model進(jìn)行跨組件綁定的基本實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue使用v-model進(jìn)行跨組件綁定的基本實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue-cli3+typescript初體驗(yàn)小結(jié)
這篇文章主要介紹了vue-cli3+typescript初體驗(yàn)小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02