vue-lazy-render

Description

vue check all component。

Dependence

• vue: ^2.3.0

Installation

npm install vue-check-all

Usage

import CheckAll from 'vue-check-all'
Vue.use(CheckAll)

Props

| property | description | type | default | required | | --------- | :--------------------------------------: | :-----: | :-----: | :------: | | list | The data list | Array | [] | true | | check-all | If the list is all checked. If the value is true, the list will be all checked. Must use .sync modifier. | Boolean | false | true |

scopedSlot

| property | description | type | | ----------------- | :--------------------------------------: | :------: | | list | The list contains the checked key and data key。If the checked is true, It means the data is checked | Array | | selections | The items which are checked. | Array | | select-all-change | If you want to change the checkAll prop，you should call this function，to notify the component update selections. | Function |

Events

| name | description | params | | ---------- | :--------------------------------------: | :--------: | | selections | when list item's checked is change, will emit this event. | selections |

Example

基础用法

<template>
  <check-all @selection-change="selectionChange" :list="list" :check-all.sync="checkAll">
    <template scope="scope">
      <label>
        <input type="checkbox" v-model="checkAll" @click="scope.checkAllChange">
        全选
      </label>
      <ul>
        <li v-for="item in scope.list" :key="item.data">
          <label>
            <input v-model="item.checked" type="checkbox">
            {{item.data}}
          </label>
        </li>
      </ul>
    </template>
  </check-all>
</template>

<script>
  export default {
    data () {
      return {
        list: [1,2,3],
        checkAll: true
      }
    },
    methods: {
      selectionChange (selections) {
        console.log(selections)
      }
    }
  }
</script>

Development

npm run dev
npm run port

Build

npm run mb // mac build
npm run wb // window build

License

MIT