3 changed files with 61 additions and 4 deletions
@ -0,0 +1,57 @@ |
|||||
|
<template> |
||||
|
<q-tr> |
||||
|
<q-td :style="{ 'padding-left': '2px' }"> |
||||
|
<div class="flex flex-nowrap items-center"> |
||||
|
<!--层级占位符--> |
||||
|
<span :style="`width:${27 * props.level}px;`"></span> |
||||
|
<!--展开按钮--> |
||||
|
<q-btn |
||||
|
v-if="data.children && data.children.length > 0" |
||||
|
flat |
||||
|
size="16px" |
||||
|
dense |
||||
|
padding="0px 0px" |
||||
|
:icon="data.expand ? 'bi-dash' : 'bi-plus'" |
||||
|
@click="data.expand = !data.expand" |
||||
|
/> |
||||
|
<!--展开按钮占位符--> |
||||
|
<span v-else style="width: 27px"></span> |
||||
|
<!--选择框--> |
||||
|
<q-checkbox v-model="data.selected" flat size="40px" dense /> |
||||
|
<!--文件夹图标--> |
||||
|
<q-icon v-if="data.children && data.children.length > 0" :name="data.expand ? 'folder_open' : 'folder'" color="amber" size="20px" class="px-1"></q-icon> |
||||
|
<!--文件图标--> |
||||
|
<q-icon v-else name="bi-file-earmark" size="16px" class="px-1"></q-icon> |
||||
|
</div> |
||||
|
</q-td> |
||||
|
<q-td v-for="col in cols" :key="col.name" :style="{ 'padding-left': '7px' }"> |
||||
|
<div class="flex flex-nowrap items-center"> |
||||
|
<div v-dompurify-html="col.format ? col.format(data[col.name], data) : col.value"></div> |
||||
|
</div> |
||||
|
</q-td> |
||||
|
</q-tr> |
||||
|
<template v-for="child in data.children" :key="child.id"> |
||||
|
<TreeGridRow v-if="data.expand" :cols="cols" :data="child" :level="props.level + 1"></TreeGridRow> |
||||
|
</template> |
||||
|
</template> |
||||
|
<script setup lang="ts"> |
||||
|
const props = defineProps({ |
||||
|
level: { type: Number, default: 0 }, |
||||
|
cols: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return []; |
||||
|
}, |
||||
|
}, |
||||
|
data: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {}; |
||||
|
}, |
||||
|
}, |
||||
|
}); |
||||
|
const cols = props.cols; |
||||
|
const data = props.data; |
||||
|
|
||||
|
console.info('cols===============', cols); |
||||
|
</script> |
Loading…
Reference in new issue