bi-vi-tree-crowd-web v1.0.1

组件使用

逻辑圈选组件

import BiCrowdTree from "bi-vi-tree-crowd-web";
import "bi-vi-tree-crowd-web/dist/bi-crowd-tree.css";
// import BiCrowdTree from './bi-crowd-tree.vue';
export default {
  name: "Bi",
  components: {
    BiCrowdTree,
  },
  data() {
    return {
      treeValue: {
        isLeafNode: false,
        operate: 'and',
        children: [{
          isLeafNode: true,
          value: {
            labelValue: 2,
            sex: 'ad'
          }
        }, {
          isLeafNode: true,
          value: {
            labelValue: 3,
            sex: 'dashjkh'
          }
        }, {
          isLeafNode: false,
          operate: 'or',
          children: [{
            isLeafNode: true,
            value: {
              labelValue: 4,
              sex: 'djs'
            }
          }]
        }]
      },
      rules: [
        {
          title: '添加节点',
          value: 'node'
        }, {
          title: '添加集合',
          value: 'set'
        }
      ],
    };
  },
  watch: {
    treeValue: {
      deep: true,
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  methods: {
    add() {
      console.log('添加')
    }
  }
};

<BiCrowdTree
  :value="treeValue"
  :content="{labelValue: 1, sex: '男'}"
  :iconStyle="{size: 14, color: 'red'}"
  :popoerContent="{title: '这是title',content: '这是内容', cancelText: '取消', confirmText: '确定'}"
  lang="en"
  @add="add"
>
  <template v-slot="{contents}">
    <byted-input v-model="contents.labelValue"></byted-input>
    <byted-input v-model="contents.sex"></byted-input>
  </template>
  <template :slot="rule.value" v-for="rule in rules">
    {{rule.title}}
  </template>
  <template slot="setIcon">
    集合
  </template>
  <template slot="nodeIcon">
    节点
  </template>
</BiCrowdTree>

组件属性

插槽

事件