vue-selectl

selector based on vue2


Keywords
A, multi, function, personnel, selection, plugin
License
ISC
Install
npm install vue-selectl@1.0.3

Documentation

vue-selectl

Demo

Demo

vue-selectl base on Vue 2

Install

npm install vue-selectl --save

How to use

Attributes

parameter explain type optional default
customdatas custom data array - []
initcurlists init data array - []
limit choose up to a few number - 0

Events

even name explain callback
checkitem listen to selection array
  1. use script
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link  rel="stylesheet" href="./dist/styles.css" />
</head>
<body>
  <div id="app">
      <vue-selectl :customdatas="datas" @checkitem="checkItem" :initcurlists="curLists" :limit="limit"></vue-selectl>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="./dist/vue-selectl.js"></script>
<script type="text/javascript">
  var app = new Vue({
      el: '#app',
      data () {
        return {
          curLists: [4, 17, 20, 24, 23, 11],
          limit: 5,
          datas: {
            name: '所有部门',
            checked: false,
            id: 1,
            parentId: null,
            nodeSelectNotAll: false,
            englishName: 'all',
            child: [
              {
                name: '行政部',
                checked: false,
                id: 2,
                parentId: 1,
                nodeSelectNotAll: false,
                englishName: 'Administration Department',
                child: [
                  {
                    name: '行政管理',
                    checked: false,
                    id: 3,
                    parentId: 2,
                    nodeSelectNotAll: false,
                    englishName: 'Administrative Management',
                    child: [
                      {
                        name: '风风',
                        checked: false,
                        id: 4,
                        parentId: 3,
                        nodeSelectNotAll: false,
                        englishName: 'Feng Feng'
                      },
                      {
                        name: '后勤管理',
                        checked: false,
                        id: 5,
                        parentId: 3,
                        nodeSelectNotAll: false,
                        englishName: 'Logistics Management',
                        child: [
                          {
                            name: '行政安全',
                            checked: false,
                            id: 16,
                            parentId: 5,
                            nodeSelectNotAll: false,
                            englishName: 'Administrative Security',
                            child: [
                              {
                                name: '卡拉',
                                checked: false,
                                id: 17,
                                parentId: 16,
                                nodeSelectNotAll: false,
                                englishName: 'Ka La'
                              },
                              {
                                name: '乒乓',
                                checked: false,
                                id: 18,
                                parentId: 16,
                                nodeSelectNotAll: false,
                                englishName: 'Ping Pang'
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    name: '企业文化',
                    checked: false,
                    id: 6,
                    parentId: 2,
                    nodeSelectNotAll: false,
                    englishName: 'Corporate Culture',
                    child: [
                      {
                        name: '企业活动',
                        checked: false,
                        id: 7,
                        parentId: 6,
                        nodeSelectNotAll: false,
                        englishName: 'Enterprise Activity',
                        child: [
                          {
                            name: '日常活动',
                            checked: false,
                            id: 19,
                            parentId: 7,
                            nodeSelectNotAll: false,
                            englishName: 'Daily Activities',
                            child: [
                              {
                                name: '小健',
                                checked: false,
                                id: 20,
                                parentId: 19,
                                nodeSelectNotAll: false,
                                englishName: 'Xiao Jian'
                              },
                              {
                                name: '小东',
                                checked: false,
                                id: 21,
                                parentId: 19,
                                nodeSelectNotAll: false,
                                englishName: 'Acron'
                              }
                            ]
                          }
                        ]
                      },
                      {
                        name: '企业宣传',
                        checked: false,
                        id: 8,
                        parentId: 6,
                        nodeSelectNotAll: false,
                        englishName: 'Enterprise Propaganda',
                        child: [
                          {
                            name: '宣传文案',
                            checked: false,
                            id: 22,
                            parentId: 8,
                            nodeSelectNotAll: false,
                            englishName: 'Propaganda copy',
                            child: [
                              {
                                name: '哈利',
                                checked: false,
                                id: 23,
                                parentId: 22,
                                nodeSelectNotAll: false,
                                englishName: 'Ha Li'
                              },
                              {
                                name: '米妮',
                                checked: false,
                                id: 24,
                                parentId: 22,
                                nodeSelectNotAll: false,
                                englishName: 'Minnie'
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                name: '财务部',
                checked: false,
                id: 9,
                parentId: 1,
                nodeSelectNotAll: false,
                englishName: 'Finance Department',
                child: [
                  {
                    name: '税务管理',
                    checked: false,
                    id: 10,
                    parentId: 9,
                    nodeSelectNotAll: false,
                    englishName: 'Tax Administration',
                    child: [
                      {
                        name: '张三',
                        checked: false,
                        id: 11,
                        parentId: 10,
                        nodeSelectNotAll: false,
                        englishName: 'Zhang San'
                      },
                      {
                        name: '李四',
                        checked: false,
                        id: 12,
                        parentId: 10,
                        nodeSelectNotAll: false,
                        englishName: 'Halen'
                      }
                    ]
                  },
                  {
                    name: '财务管理',
                    checked: false,
                    id: 13,
                    parentId: 9,
                    nodeSelectNotAll: false,
                    englishName: 'Financial Management',
                    child: [
                      {
                        name: '李李',
                        checked: false,
                        id: 14,
                        parentId: 13,
                        nodeSelectNotAll: false,
                        englishName: 'Aline Ly'
                      },
                      {
                        name: '赵六',
                        checked: false,
                        id: 15,
                        parentId: 13,
                        nodeSelectNotAll: false,
                        englishName: 'Zhao Liu'
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      },
      methods: {
        checkItem: function (datas) {
          console.log('checkItem', datas)
        }
      }
    });
</script>
</html>
  1. webpack
import VueSelectl from 'vue-selectl'
import 'vue-selectl/dist/styles.css'
Vue.use(VueSelectl)