使用ant的checkboxGroup将列表信息添加为多选框，并根据多选框的转换进行操作

使用的数据（放到script的data（）中）

taskList: [],
      taskListOptions: [],

      taskItems: [],
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: { keepShow: true },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#F5F5F5", //滚动条颜色
          opacity: 0.5, //滚动条透明度
          "overflow-x": "hidden",
        },

对应的方法

 // getSearchTask({pagesize: 100, pagenum: 1, status: 1}).then(res => {
        // this.taskList = res.result.data
        this.taskList = [
          { value: "呼和浩特市", name: "呼和浩特市 " },
          { value: "鄂尔多斯市", name: "鄂尔多斯市 " },
          { value: "呼伦贝尔市", name: "呼伦贝尔市 " },
          { value: "巴彦淖尔市", name: "巴彦淖尔市 " },
          { value: "乌兰察布市", name: "乌兰察布市 " },
          { value: "锡林郭勒盟", name: "锡林郭勒盟 " },
          { value: "阿拉善盟", name: "阿拉善盟  " },
          { value: "包头市", name: "包头市   " },
          { value: "乌海市", name: "乌海市   " },
          { value: "赤峰市", name: "赤峰市   " },
          { value: "通辽市", name: "通辽市   " },
          { value: "兴安盟", name: "兴安盟   " },
        ];
        console.log("变化图斑任务列表：", this.taskList);
        this.taskList.forEach((task) => {
          this.taskListOptions.push(task.name);
        });

在html中对应的标签

　　　　　　<vue-scroll :ops="ops" class="task-list-items">
            <a-checkbox-group
              v-model="taskItems"
              name="taskListCheckboxGroup"
              :options="taskListOptions"
              @change="changeItems"
            />
          </vue-scroll>

由于用的是vue的cli进行创建的，所以需要加载相应的属性，并且声明对应的变量

对于vue-scroll

import vuescroll from "vuescroll";
import "vuescroll/dist/vuescroll.css";

　Vue.use(vuescroll);

对于ant

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

  Vue.use(Antd);

另外，为了实现多选框选中直接产生相应事件的功能，需要设置changge事件

 // 多选框的监听事件
      changeItems() {
      console.log(this.taskItems);
      this.taskItems.forEach((item) => {
        console.log(item);
      });
    },