wbfc-linkage

智源云联动器

它是一个基于Wbfc智源云服务和element-ui的联动器组件。它使用Axios进行网络请求，因此可以异步联动任意层级的结构化数据。

当一个有着数形或层级关系的数据集合需要异步从服务器加载时，就可以选择智源云联动器。它是Cascader(级联选择器)的子集，除了一些特有的属性以外，均可以参考 Cascader(级联选择器)

基础用法

一般联动器在有选择行政区划的业务中最为常见

<div class="wbfc-linkage block">
  <span class="demonstration">默认 初始化加载数据</span>
  <wbfc-linkage :url="action">
  </wbfc-linkage>
</div>
<div class="wbfc-linkage block">
  <span class="demonstration">默认 手动加载数据</span>
  <wbfc-linkage ref="linkage" :url="action" :init="false">
  </wbfc-linkage>
  <el-button type="primary" @click="initData">加载数据</el-button>
</div>
<script>
export default {
    data() {
      return {
        action : 'http://192.168.20.5:1106/system/area/linkageList'
      }
    },
    methods: {
      initData() {
        this.$refs.linkage.start();
      }
    }
  };
</script>

设置默认值

若联动器有需要初始化的默认值，只需要绑定v-model即可，联动器的value是Array型。

<div class="block">
  <span class="demonstration">带有默认值的初始化</span>
  <wbfc-linkage :url="action" v-model="selectedOptions">
  </wbfc-linkage>
</div>
<script>
export default {
    data() {
      return {
        action : 'http://192.168.20.5:1106/system/area/linkageList',
        selectedOptions:['110000000000','110100000000','110101000000']
    }
  };
</script>

获取联动值

一般在包含有保存或选择联动器值的情况下，会需要得到联动器的选中值，一般有三种方法可以得到选中值。

1. 直接使用v-model的绑定值
2. 使用getValues函数
3. 使用getValue函数 (按索引得到某个选定值)

<div class="wbfc-linkage block">
  <span class="demonstration">直接使用v-model的绑定值</span>
  <wbfc-linkage :url="action" v-model="selectedOptions2">
  </wbfc-linkage>
  <el-button type="primary" @click="getData">加载数据</el-button>
</div>
<div class="wbfc-linkage block">
  <span class="demonstration">使用getValues函数</span>
  <wbfc-linkage :url="action" ref="linkage2">
  </wbfc-linkage>
  <el-button type="primary" @click="getData">加载数据</el-button>
</div>
<div class="wbfc-linkage block">
  <span class="demonstration">使用getValue函数</span>
  <wbfc-linkage :url="action" v-model="selectedOptions3" ref="linkage3">
  </wbfc-linkage>
  <el-button type="primary" @click="getData3">获取第二级的值</el-button>
</div>
<script>
export default {
    data() {
      return {
        action : 'http://192.168.20.5:1106/system/area/linkageList',
        selectedOptions3: ['110000000000','110100000000','110101000000']
    },
    methods: {
      getData() {
        alert(this.selectedOptions2);
      },
      getData2() {
        alert(this.$refs.linkage2.getValues());
      },
      getData3() {
        alert(this.$refs.linkage3.getValue(1));
      }
    }
  };
</script>

只联动到某层级

在某些特定的场景下，联动的层级很可能不同, 默认为三级联动。

<div class="block">
  <span class="demonstration">二级联动</span>
  <wbfc-linkage :url="action" :link-level="2">
  </wbfc-linkage>
</div>
<script>
export default {
    data() {
      return {
        action : 'http://192.168.20.5:1106/system/area/linkageList'
      }
    }
  };
</script>

选择任意节点

在某些特定的场景下，选择值可以是任意节点。可以通过设置属性:cascader-props="{checkStrictly: true}"来实现。更多Props属性设置可以参考 Cascader(级联选择器)

<template>
  <div id="app">
    <wbfc-linkage :url="action" :cascader-props="{checkStrictly: true}">
    </wbfc-linkage>
  </div>
</template>

<script>
import WbfcLinkage from './WbfcLinkage'

export default {
  name: 'App',
  components: {
    WbfcLinkage
  },
  computed: {
  },
  data () {
    return {
      action: 'http://192.168.20.5:8893/system/area/linkageList',
    }
  },
  mounted(){
  }
}
</script>

自定义联动规则

由于业务的不同，可能会遇到数据结构虽然满足层次结构的要求，但是数据项名称不满足，此时可以手动指定联动规则以及参数值。

<div class="block">
  <span class="demonstration">自定义联动规则</span>
  <wbfc-linkage :url="action" :props="props" :before-linkage="beforeLinkage">
  </wbfc-linkage>
</div>
<script>
export default {
    data() {
      return {
        action : 'http://192.168.20.5:1106/system/area/linkageList',
        props: {
            value: 'code', // 为返回值提供联动格式转换
            label: 'name',
            children: 'children'
        },
        beforeLinkage: function(val) {
          // 将联动值转换为联动url的参数
          if (!val) {
            val = "0";
          }
          return { 'code' : val };
        }
      }
    }
  };
</script>

Attributes

除以下的属性外，其他属性请参考 Cascader(级联选择器)

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | url | 联动请求URL 必填 | string | — | — | | link-level | 联动层级 | number | — | 3 | | root-code | 根节点值(获取第一级数据的请求值) | string | — | 0 | | init | 是否初始化加载一级数据 | boolean | — | true | | show-log | 是否打印debug日志 | boolean | — | false | | before-linkage | 联动前拦截器 在自定义联动规则时，在联动请求前进行联动值的转换 | function(value) | — | — |

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Versions

版本|更新时间|更新说明 ---|---|--- 1.1.1 | 2021/04/01 | Element2.15.1升级; 1.1.0 | 2019/06/04 | Element2.9升级 兼容了cascade的props功能; 1.0.9 | 2018/11/01 | 修正在change-on-select="true"联动失效的问题; 1.0.8 | 2018/10/26 | 修正手动设置默认值联动不正确的问题; 1.0.7以前|2018/10/25| wbfc-linkage发布到npm server;