Tree 树形控件

基础用法

<template>
  <div>
    <plv-tree :data="data" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          id: '1',
          label: '一级 1',
          children: [{
            id: '1-1',
            label: '二级 1-1',
            children: [{
              id: '1-1-1',
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: '2',
          label: '一级 2',
          children: [{
            id: '2-1',
            label: '二级 2-1',
            children: [{
              id: '2-1-1',
              label: '三级 2-1-1'
            }, {
              id: '2-1-2',
              label: '三级 2-1-2'
            }]
          }, {
            id: '2-2',
            label: '二级 2-2'
          }]
        }, {
          id: '3',
          label: '一级 3',
          children: [{
            id: '3-1',
            label: '二级 3-1',
            children: [{
              id: '3-1-1',
              label: '三级 3-1-1'
            }]
          }, {
            id: '3-2',
            label: '二级 3-2',
            children: [{
              id: '3-2-1',
              label: '三级 3-2-1'
            }]
          }]
        }]
      };
    }
  };
</script>

显示代码

可选择的树形组件

<template>
  <div>
    <plv-tree
      show-checkbox
      :checkbox-value.sync="checkboxValue"
      :data="data" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checkboxValue: [],
        data: [{
          id: '1',
          label: '一级 1',
          children: [{
            id: '1-1',
            label: '二级 1-1',
            children: [{
              id: '1-1-1',
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: '2',
          label: '一级 2',
          children: [{
            id: '2-1',
            label: '二级 2-1',
            children: [{
              id: '2-1-1',
              label: '三级 2-1-1'
            }, {
              id: '2-1-2',
              label: '三级 2-1-2'
            }]
          }, {
            id: '2-2',
            label: '二级 2-2'
          }]
        }, {
          id: '3',
          label: '一级 3',
          children: [{
            id: '3-1',
            label: '二级 3-1',
            children: [{
              id: '3-1-1',
              label: '三级 3-1-1'
            }]
          }, {
            id: '3-2',
            label: '二级 3-2',
            children: [{
              id: '3-2-1',
              label: '三级 3-2-1'
            }]
          }]
        }]
      };
    }
  };
</script>

显示代码

手风琴模式

<template>
  <div>
    <plv-tree accordion :data="data" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          id: '1',
          label: '一级 1',
          children: [{
            id: '1-1',
            label: '二级 1-1',
            children: [{
              id: '1-1-1',
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: '2',
          label: '一级 2',
          children: [{
            id: '2-1',
            label: '二级 2-1',
            children: [{
              id: '2-1-1',
              label: '三级 2-1-1'
            }, {
              id: '2-1-2',
              label: '三级 2-1-2'
            }]
          }, {
            id: '2-2',
            label: '二级 2-2'
          }]
        }, {
          id: '3',
          label: '一级 3',
          children: [{
            id: '3-1',
            label: '二级 3-1',
            children: [{
              id: '3-1-1',
              label: '三级 3-1-1'
            }]
          }, {
            id: '3-2',
            label: '二级 3-2',
            children: [{
              id: '3-2-1',
              label: '三级 3-2-1'
            }]
          }]
        }]
      };
    }
  };
</script>

显示代码

自定义节点样式

<template>
  <div>
    <plv-tree :data="data">
      <div slot-scope="scope" v-html="getNodeLabel(scope.node)"></div>
    </plv-tree>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [{
          id: '1',
          label: '一级 1',
          children: [{
            id: '1-1',
            label: '二级 1-1',
            children: [{
              id: '1-1-1',
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: '2',
          label: '一级 2',
          children: [{
            id: '2-1',
            label: '二级 2-1',
            children: [{
              id: '2-1-1',
              label: '三级 2-1-1'
            }, {
              id: '2-1-2',
              label: '三级 2-1-2'
            }]
          }, {
            id: '2-2',
            label: '二级 2-2'
          }]
        }, {
          id: '3',
          label: '一级 3',
          children: [{
            id: '3-1',
            label: '二级 3-1',
            children: [{
              id: '3-1-1',
              label: '三级 3-1-1'
            }]
          }, {
            id: '3-2',
            label: '二级 3-2',
            children: [{
              id: '3-2-1',
              label: '三级 3-2-1'
            }]
          }]
        }]
      };
    },

    methods: {
      getNodeLabel(data) {
        return data.label + '<div style="float: right;padding-right: 20px;">自定义内容</div>';
      }
    }
  };
</script>

显示代码

Attributes

参数	说明	类型	可选值	默认值
data	展示的数据	Array	-	[]
accordion	手风琴模式	Boolean	-	false
highlightCurrent	是否高亮选中行，需配合currentValue使用	Boolean	-	false
highlightBgColor	高亮时的背景颜色	String	#FFFFFF
currentValue	选中行的值，需要绑定.sync	String Number	-	-
currentDisabled	节点是否禁止选中，仅控制选中状态，不控制子节点是否展示	Function	-	-
openChildrenDisabled	非叶子节点时，子节点是否禁止展开，仅控制展开状态，不控制选中状态	Function	-	-
openChildrenMode	展开节点模式，node：点击节点（包括箭头）就展开，arrow：仅点击箭头才打开	String	node arrow	node
showCheckbox	是否显示复选框	Boolean	-	false
checkboxValue	复选框选中的值，需要绑定.sync	Array	-	-
checkboxMode	复选框选中模式，leaf：只能选择叶子节点，all：所有节点均可选中	String	leaf all	leaf
checkboxDisabled	复选框是否可选	Function	-	-
indent	缩进单位	Number	-	16
nodeVisible	节点是否显示，返回true为显示，返回false为隐藏，传入参数(data)	Function	-	-
props	配置选项，详细见下表	Object	-	-
nodeIcon	自定义节点图标	String	-	caret-right
nodeBgColor	节点背景颜色	String	-	#F8F8FB
nodeHeight	节点高度	String	-	40px
hoveringBgColor	节点hover状态的背景颜色	String	-	#FFFFFF

Props Config

参数	说明	类型	可选值	默认值
id	指定节点唯一标识的节点对象的某个属性值	String Function(data)	-	id
label	指定节点标签文本为节点对象的某个属性值	String Function(data)	-	label
children	指定子树为节点对象的某个属性值	String Function(data)	-	children
isLeaf	指定节点为叶子节点的节点对象的某个属性值	String Function(data)	-	isLeaf