目錄
一、樹形表格如何添加序號體現(xiàn)層級關(guān)系?
二、樹形表格展開收縮圖標(biāo)位置放置，設(shè)置指定列
三、表單嵌套樹形表格的校驗問題以及如何給校驗rules傳參
普通表格綁定如下：這種方法只能校驗表格的第一層，樹形需要遞歸設(shè)置子級節(jié)點prop。
樹形表格綁定如下：使用下面的方法（復(fù)制粘貼可以直接用）
四、樹形表格如何通過某屬性值進行過濾展示
1、可使用:row-style="tableRowClassName"去進行篩選 控制顯隱 這個方法比較簡單且不改變原treedata數(shù)據(jù)
2、過濾滿足屬性值需要的節(jié)點生成新的treedata數(shù)據(jù)來渲染表格
一、樹形表格如何添加序號體現(xiàn)層級關(guān)系?
實現(xiàn)：treeData為表格數(shù)據(jù)，遞歸調(diào)用getProjectIndex方法即可實現(xiàn)；例如：1，1,1，1.2
<el-table-column label="序號" width="100" type="">
<template slot-scope="scope">{{ scope.row.projectIndex }}</template>
</el-table-column>
// 添加索引
addIndex() {
this.treeData.forEach((node, i) => {
this.getProjectIndex(node, '', i)
// 默認(rèn)展開第一層
this.expandKeys.push(node.id + '')
})
},
// 獲取序號
getProjectIndex(node, parentIndex, index) {
const projectIndex = parentIndex ? `${parentIndex}.${index + 1}` : `${index + 1}`
node.projectIndex = projectIndex
if (node.children) {
node.children.forEach((child, i) => {
this.getProjectIndex(child, projectIndex, i)
})
}
},二、樹形表格展開收縮圖標(biāo)位置放置，設(shè)置指定列
在不需要的列前加上 ? type=""
<el-table-column label="序號" width="100" type="">
<template slot-scope="scope">{{ scope.row.projectIndex }}</template>
</el-table-column>三、表單嵌套樹形表格的校驗問題以及如何給校驗rules傳參
需求：一個樹形表格中每個樹節(jié)點都需要有日期范圍，想要校驗子節(jié)點的日期范圍不能超過父節(jié)點；
解決：如何綁定form的prop值？先了解如何綁定普通表格進行校驗
-
普通表格綁定如下：這種方法只能校驗表格的第一層，樹形需要遞歸設(shè)置子級節(jié)點prop。
<template slot-scope="scope"> <el-form-item :prop="`treeData.${scope.$index}.beginDate`" :rules="beginDateRules"> <el-date-picker v-model="scope.row.beginDate" type="date" clearable format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="開始日期" /> </el-form-item> </template> -
樹形表格綁定如下：使用下面的方法（復(fù)制粘貼可以直接用）
findPosi(tree, targetId, path = '') {
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node.id === targetId) {
return path + i
}
if (node.children && node.children.length > 0) {
const childPath = `${path}${i}.children.`
const result = this.findPosi(node.children, targetId, childPath)
if (result !== null) {
return result
}
}
}
return null
}具體代碼實現(xiàn)如下：文章來源：http://www.zghlxwxcb.cn/news/detail-667309.html
//1、表單表格嵌套實現(xiàn)代碼 其余省略
<el-form ref="treeForm" :model="treeForm">
<el-table
:data="treeForm.treeData"
row-key="id"
:row-style="tableRowClassName"
:expand-row-keys="expandKeys"
:tree-props="{ children: 'children'}"
>
<el-table-column label="預(yù)計周期" width="310" align="center">
<template slot-scope="scope">
<el-form-item
:prop="'treeData.' + findPosi(treeForm.treeData,scope.row.id) + '.beginDate'"
:rules="beginDateRules(scope.row)"
>
<el-date-picker
v-model="scope.row.beginDate"
:style="{width: '100%'}"
type="date"
clearable
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="開始日期"
/>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>//2、script標(biāo)簽內(nèi)容
//定義的數(shù)據(jù)格式
treeForm: {
treeData: []
},
//方法調(diào)用 給rules傳參方式
beginDateRules(row) {
return [
{ validator: (rule, value, callback) => { this.validateBeginDate(rule, value, callback, row) }, trigger: 'blur' }
]
},
validateBeginDate(rule, value, callback, row) {
// 沒有父節(jié)點不做判斷
if (row.parentId === 0) {
callback()
} else {
// 查找父節(jié)點
const node = findParentId(this.treeForm.treeData, row.parentId)
if (value && node.beginDate !== null) {
if (new Date(value) < new Date(node.beginDate)) {
callback(new Error('不能超過上一階段日期'))
} else {
callback()
}
} else {
callback()
}
}
},
//用到的工具類
// 1定義一個遞歸函數(shù)，接受一個對象或數(shù)組，一個目標(biāo)id值和一個路徑數(shù)組作為參數(shù) 查找目標(biāo)id所在的路徑
findPosi(tree, targetId, path = '') {
for (let i = 0; i < tree.length; i++) {
const node = tree[i]
if (node.id === targetId) {
return path + i
}
if (node.children && node.children.length > 0) {
const childPath = `${path}${i}.children.`
const result = this.findPosi(node.children, targetId, childPath)
if (result !== null) {
return result
}
}
}
return null
}
//2通過節(jié)點id查找其父節(jié)點信息
/**
* @param {*} tree
* @param {*} targetId
* @param {*} parentId
* @returns
* 通過節(jié)點id查找其父節(jié)點信息
*/
export function findParentId(tree, targetId) {
for (const node of tree) {
if (node.id === targetId) {
return node
}
if (node.children) {
const result = findParentId(node.children, targetId, node.id)
if (result !== null) {
return result
}
}
}
return null
}
四、樹形表格如何通過某屬性值進行過濾展示
1、可使用:row-style="tableRowClassName"去進行篩選 控制顯隱 這個方法比較簡單且不改變原treedata數(shù)據(jù)
tableRowClassName(data) {
? ? ? if (data.row.enabled === '0') {
? ? ? ? return { display: 'none' }
? ? ? }
? ? },2、過濾滿足屬性值需要的節(jié)點生成新的treedata數(shù)據(jù)來渲染表格
原數(shù)據(jù) treeData:[] 新數(shù)據(jù)：tree:[] 調(diào)用getenabledNodes（）方法文章來源地址http://www.zghlxwxcb.cn/news/detail-667309.html
// 篩選選中節(jié)點
getenabledNodes() {
const tree = this.filterUnenabledNodes(this.treeData)
console.log(tree)
},
filterUnenabledNodes(treeData) {
const filteredData = []
treeData.forEach(node => {
if (node.enabled === '1') {
filteredData.push(Object.assign({}, node, {
children: node.children ? this.filterUnenabledNodes(node.children) : []
}))
}
})
return filteredData
},到了這里，關(guān)于ElementUI 樹形表格的使用以及表單嵌套樹形表格的校驗問題等匯總的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
