vol-vue框架Cascader 组件多级联动（前端部分）

vol框架官方链接：vol-vue (volcore.xyz)；

vol框架基于element组件库以及iview组件库进行封装的。

vol框架中的Cascader是基于iview组件库中的iview封装的，详细看下方的官方文档。

iview官方链接：级联选择器 - View Design (iviewui.com)

需求：联动的时候有二级数据的时候 一级数据不可以选中，但是可以选中一级后面的数据（二级三级甚至更后面的），但是一级下面没有二级数据的话，就可以选中一级的数据。

在iview中的cascader组件中封装了一个方法，change-on-select 这个方法的值为布尔类型的，为true的时候可以设置为不管点击哪级都可以选中，false的时候是必须是最后一级才可以选中。这里将其设置为true，但是显然不能满足上述需求的条件。于是自定义一个字段，经自定义的字段传递到vol封装VloForm.vue中，见代码：

<template>
  <div>
    <view-grid ref="grid" :columns="columns" :detail="detail" :editFormFields="editFormFields" :editFormFileds="editFormFields" :editFormOptions="editFormOptions"
      :searchFormFields="searchFormFields" :searchFormFileds="searchFormFields" :searchFormOptions="searchFormOptions" :table="table" :extend="extend">
    </view-grid>
  </div>
</template>
<script>
import extend from '@/extension/Product/Products.js'
import ViewGrid from '@/components/basic/ViewGrid.vue'
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: 'id',
        footer: 'Foots',
        cnName: '产品列表',
        name: 'Products',
        url: '/Products/',
        sortName: 'createDate',
      },
      extend: extend,
      editFormFields: {
        name: '',
        type: [],
        typename: '',
      },
      editFormOptions: [
        [
          {
            dataKey: 'tree_protype',
            data: [],
            title: '产品类型',
            required: true,
            colSize: 4.5,
            field: 'type',
            type: 'cascader',
            // 这里将changeOnSelect设置为true，每一级都可以进行点击
            changeOnSelect: true,
            // 这里传递过去一个自定义的字段
            cascaderValue: true,
          },
          {
            title: '产品类型',
            field: 'typename',
            colSize: 4,
            hidden: true,
            disabled: true,
          },
        ],
      ],
      searchFormFields: {
        name: '',
        typename: '',
      },
      searchFormOptions: [
        [
          { field: 'name', title: '产品名称', type: 'like' },
          {
            field: 'type',
            title: '产品类型',
            type: 'cascader',
            dataKey: 'tree_protype',
            data: [],
          },
        ],
        
      ],
      columns: [
        {
          field: 'name',
          title: '产品名称',
          type: 'string',
          width: 120,
          require: true,
          align: 'left',
          sortable: true,
          show: true,
        },
        {
          field: 'type',
          title: '产品类型',
          type: 'string',
          bind: { key: 'pro_type', data: [] },
          width: 120,
          require: true,
          align: 'left',
          hidden: true,
          show: true,
        },
      ],
      detail: {
        // 从表明细表配置
      },
    }
  },
}
export default vueParam
</script>

所以在VolForm.vue文件总找到change方法，写一个自己的逻辑，对该功能进行封装。iview组件中的cascader的change方法，选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据。对change方法进行改编，代码如下：

<template>
  <Form ref="formValidate" :style="{ width: width > 0 ? width + 'px' : '100%' }" :model="_formFields" :label-width="labelWidth" @submit.native.prevent>
    <!-- :rules="ruleValidate" -->
    <slot name="header"></slot>

      <FormItem :rules="getRule(item, _formFields)" :label="item.title ? item.title + '：' : ''" :label-width="item.width" :prop="item.field">
        <div :class="{ 'form-item-extra': item.extra }">
          <div v-if="item.type == 'header'"></div>
          <VolUploadUpgrade v-else-if="item.type == 'imgupgrade'" :fileInfo="_formFields[item.field]" :multiple="item.multiple" :max-file="item.maxFile" :max-size="item.maxSize"
            :append="item.multiple" :on-change="item.onChange" :downLoad="item.downLoad ? true : false" :formFields="_formFields">
          </VolUploadUpgrade>
          <Cascader v-else-if="item.type == 'cascader'" :load-data="item.loadData" @on-change="
                (value, selectedData) => {
                  if(item.cascaderValue){
                    let play=null
                    play =  changeProducts(value, selectedData,item.data,item.field)
                    if(play){
                      item.onChange && item.onChange(value, selectedData);
                    }
                  }else{
                    item.onChange && item.onChange(value, selectedData);
                  }
                }
              " :ref="item.field" :change-on-select="item.changeOnSelect" :data="item.data" :render-format="item.formatter" filterable v-model="_formFields[item.field]"
            :placeholder="item.placeholder || '请选择' + item.title"></Cascader>
          <!-- <Cascader v-else-if="item.type == 'cascader'" @on-change="(value, selectedData)=>{ changeProducts(value, selectedData,item.data,_formFields[item.field])}"
            :data="item.data" filterable v-model="_formFields[item.field]"></Cascader> -->
        </div>
      </FormItem>
    <slot name="footer"></slot>
  </Form>
</template>
export default {
    // 此处省略代码
    methods: {
       // 判断是否是特定的需求 一级下面有二级一级不可选中
        changeProducts(value, selectedData, listData, CascaderValue) {
          if (selectedData.length == 1) {
            listData.forEach((_) => {
              if (selectedData[0].id == _.id && _.children.length) {
                this._formFields[CascaderValue] = []
                return false
              } else {
                return true
              }
            })
          } else {
            return true
          }
        },
    }
}

上述方法，假如传递了cascaderValue为true的话，就会进入到判断里面，然后走自定义的方法，对数据进行操作，当选中的是有二级的一级的时候，不会回显到输入框内。见效果：点击一级的时候不会回显到输入框内