146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
<template>
|
|
<view>
|
|
<view class="cell-box" :style="{ backgroundColor: checked ? checkedBgColor : '#fff' }">
|
|
<view
|
|
class="expand-icon"
|
|
v-if="hasChildren"
|
|
@click.stop="toggleExpand"
|
|
>
|
|
<view :class="['triangle', expanded ? 'down' : 'right']"></view>
|
|
</view>
|
|
<view class="label">{{ node[labelKey] }}</view>
|
|
<checkbox-group v-if="multiple" @change="onCheck">
|
|
<checkbox
|
|
:disabled="node.disabled"
|
|
:value="String(node[idKey])"
|
|
:checked="checked"
|
|
style="margin-left: 10rpx;"
|
|
/>
|
|
</checkbox-group>
|
|
<radio-group v-else @change="onRadio">
|
|
<radio
|
|
:disabled="node.disabled"
|
|
:value="String(node[idKey])"
|
|
:checked="checked"
|
|
style="margin-left: 10rpx;"
|
|
/>
|
|
</radio-group>
|
|
</view>
|
|
<view v-if="hasChildren && expanded" style="padding-left: 30rpx;">
|
|
<tree-node
|
|
v-for="child in node[childrenKey]"
|
|
:key="child[idKey]"
|
|
:node="child"
|
|
:children-key="childrenKey"
|
|
:label-key="labelKey"
|
|
:id-key="idKey"
|
|
:checked-bg-color="checkedBgColor"
|
|
:multiple="multiple"
|
|
:checked-ids="checkedIds"
|
|
:default-expanded="defaultExpanded"
|
|
@check-change="$emit('check-change', $event)"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TreeNode from './TreeNode.vue'
|
|
export default {
|
|
name: 'TreeNode',
|
|
components: { TreeNode },
|
|
props: {
|
|
node: { type: Object, required: true },
|
|
childrenKey: { type: String, required: true },
|
|
labelKey: { type: String, required: true },
|
|
idKey: { type: String, required: true },
|
|
checkedIds: { type: Array, required: true },
|
|
parentPath: { type: Array, default: () => [] },
|
|
checkedBgColor: { type: String, default: '#fff' }, // 你喜欢的默认色
|
|
multiple: { type: Boolean, default: true },
|
|
defaultExpanded: { type: Boolean, default: false }
|
|
},
|
|
data() {
|
|
return {
|
|
expanded: this.defaultExpanded
|
|
}
|
|
},
|
|
computed: {
|
|
checked() {
|
|
return this.checkedIds.includes(this.node[this.idKey]);
|
|
},
|
|
hasChildren() {
|
|
return Array.isArray(this.node[this.childrenKey]) && this.node[this.childrenKey].length > 0;
|
|
},
|
|
},
|
|
methods: {
|
|
onCheck(e) {
|
|
this.$emit('check-change', { id: this.node[this.idKey], label: this.node[this.labelKey], checked: e.detail.value.length > 0 });
|
|
},
|
|
onRadio(e) {
|
|
// radio-group change 事件 e.detail.value 是选中的 value
|
|
this.$emit('check-change', { id: this.node[this.idKey], label: this.node[this.labelKey], checked: e.detail.value === String(this.node[this.idKey]) } );
|
|
},
|
|
toggleExpand() {
|
|
this.expanded = !this.expanded;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.cell-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
// padding: 26rpx 32rpx;
|
|
padding: 18rpx 32rpx;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
line-height: 54rpx;
|
|
color: #606266;
|
|
background-color: #fff;
|
|
text-align: left;
|
|
.expand-icon {
|
|
width: 20rpx;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
margin-right: 8rpx;
|
|
user-select: none;
|
|
font-size: 16rpx;
|
|
}
|
|
.label {
|
|
flex: 1;
|
|
margin-right: 20rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 1;
|
|
overflow: hidden;
|
|
}
|
|
.box-active {
|
|
color: rgb(49, 144, 243);
|
|
}
|
|
>image {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
}
|
|
}
|
|
/* 用border画三角形 */
|
|
.triangle {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
}
|
|
.right {
|
|
border-width: 8rpx 0 8rpx 10rpx;
|
|
border-color: transparent transparent transparent #4D4D4D;
|
|
}
|
|
.down {
|
|
border-width: 10rpx 8rpx 0 8rpx;
|
|
border-color: #4D4D4D transparent transparent transparent;
|
|
}
|
|
</style> |