添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

wl-vue-select

0.5.9 Public • Published

wl-vue-select,wl-tree-select

用于vue框架的树形下拉框及带全选的普通下拉框。
Tree drop-down box for vue framework and ordinary drop-down box with select all.
本组件提供全选下拉框和树形下拉框功能。
wlVueSelect 这是一个基于 elementUi 的 el-select 组件的二次封装的下拉框,提供了全选功能和默认选中功能;
wlTreeSelect 这是一个基于 elementUi 的 el-tree 组件的二次封装的下拉框,提供了树形数据支持和默认选中功能;
因这两个需求非常普遍,所以作为一个独立插件发布。
el-select

主要发布记录

0.4.8 修复树形下拉框,子节点全部选中时,父节点无法取消的问题

npm i wl-vue-select --save

npm i wl-vue-select -S

import wl from "wl-vue-select";`
import "wl-vue-select/lib/wl-vue-select.css"
Vue.use(wl);
    <wlVueSelect
      v-model="value"
      :props="props"
      :data="data"
      multiple
      default-select
    ></wlVueSelect>
    <p>----------分割线------------</p>
    <wlTreeSelect
      width="240"
      checkbox
      :data="treeData"
      @change="hindleChanged"
      v-model="selected"
    ></wlTreeSelect>
data() {
    return {
      value: [], // 选中值
      data: [
          id: 1,
          name: "海边"
          id: 2,
          name: "森林"
          id: 3,
          name: "草原"
          id: 4,
          name: "古城"
      ], // 数据
      props: {
        label: "name",
        value: "id"
      }, // 配置
      treeData: [
          id: "love",
          name: "所有和你走过的风光",
          children: [
              id: 1,
              name: "海边",
              children: [
                  id: 5,
                  name: "蓬莱",
              id: 2,
              name: "森林"
              id: 3,
              name: "草原"
              id: 4,
              name: "古城"
      selected: [ "1" ]// 树下拉框选中数据
  methods: {
    hindleChanged(val){
      console.log(val,2)
      console.log(this.selected)