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