Vue多选--

<template>
  <div class="mask" v-show="this.$store.state.addMaskBoolean">
    <div class="maskCont">
      <div class="add">
        <h3>
          添加频谱
          <img src="./../../static/img/delete.png" alt="close" @click="closeSelf()">
        </h3>
        <ul class="optionsList">
          <!-- <li>
                        <span class="optionClass">射频通道编号</span>
                        <span class="optionClass">射频通道名字</span>
                        <span class="optionClass">服务器IP</span>
                        <span class="optionClass">通道端口</span>
                    </li> -->
          <!-- <li v-for="item in list" :key="item.id">
                        <input type="radio" name="add" class="inp">
                        <p class="pipe-title">{{item.pipe}}</p>
                        <p class="pipe-title">{{item.name}}</p>
                        <p class="pipe-title" style="margin-left: 3%;">{{item.serverip}}</p>
                        <p class="pipe-title">{{item.serveripc}}</p>
                    </li> -->
          <p v-if="remoteHasServerInfo" style="color: #b2e0f7">[中央服务器] 服务器数据读取中 ...</p>
          <li v-for="(item,index) in fetchFromList">
            <img :src="checkList.indexOf(index)>-1?'./../../static/img/yes.png':'./../../static/img/kuang.png'">
            <p class="pipe-title">{{item.serverip+" "+ item.serveripport + " "+item.name + "["+ item.pipe +"]"}}</p>
            <input type="checkbox" v-model="checkList" :value='index'/>
            <!-- <label :for="item">{{item}}</label> -->
          </li>
        </ul>
        <div class="affirmBut">
          <button class="sffirm" @click="addDetermine">确认</button>
        </div>
        <p id="showMsg" v-show="customWarning.length>0">{{customWarning}}</p>
      </div>

    </div>
  </div>
</template>
<script>
  import {wsReq_addSubscribe} from '../assets/wsRequestPackage.js';
  export default {
    props: ["chartsBoxLength"],
    data() {
      return {
        checkList: [],
        customWarning:'',
      }
    },

    computed: {

      remoteHasServerInfo() {

        let x = this.$store.state.supervisionList.length;

        return x > 0 ? false : true;
      },

      fetchFromList() {

        let newList = [];

        if (this.$store.state.supervisionList.length > 0) {

          for (let i = 0; i < this.$store.state.supervisionList.length; i++) {

            newList.push(this.$store.state.supervisionList[i]);

          }

        }
        return newList;
      }
    },

    methods: {

      closeSelf() {
        this.$store.state.addMask = true;//关闭后箭头返回
        this.clearCheckings();
        return this.$store.commit('addMaskOpposite');
      },

      clearCheckings() {
        this.customWarning = "";
      },


      addDetermine() {

        let toAddTotal = this.checkList.length;

        let totalInUse = this.$store.state.globalState.getTotalInUse();

        let resAllowedAdding = this.$store.state.presentingChartCount - totalInUse;

        if (toAddTotal > resAllowedAdding) {

          this.customWarning = "当前显示模式只能再添加" + resAllowedAdding + "个频谱，请修改显示数量，或者减少要添加的数量";

        }
        else {

          for (let i = 0; i < this.checkList.length; i++) {

            this.initChartsWithCoordinateDataStream(this.checkList[i]);

          }
          this.$store.commit('addMaskOpposite');
        }
      },


      // initial charts connect test
      initChartsWithCoordinateDataStream(indexAtList) {

        console.log(typeof(indexAtList));

        let serverip = this.$store.state.supervisionList[indexAtList].serverip;

        let serverport = this.$store.state.supervisionList[indexAtList].serveripport;

        let pipe = this.$store.state.supervisionList[indexAtList].pipe;

        this.$store.state.globalState.addSocket(serverip, serverport);

        let soc = this.$store.state.globalState.findSocket(serverip, serverport);

        if (null != soc) {

          let idx = this.$store.state.globalState.mapToChart(soc.serverip, soc.serverport, pipe, 0, 100);

          if (-1 != idx) {

            this.$store.state.globalState.setDataQueueState(idx, true);

            this.$store.state.playbackBarState.splice(idx, 1, false);

            wsReq_addSubscribe(soc, soc.serverip, pipe, idx, 31.25e6, 93.75e6);

            console.log(this.$store.state.charts[idx]);

            this.$store.state.charts[idx].refreshChartAuxInfo(this.$store.state.supervisionList[indexAtList].name);

          }
          else {

            console.log("Cont find unused chart");
          }

        }
        else {
          console.log("cont find socket:" + soc);
        }

      },

    },
    //选择哪个频谱


  }
</script>

<style scoped>
  @import "../../static/css/popupMask.css";
  #showMsg{
    height: 40px;
    position: absolute;
    left: 30px;
    top: 400px;
  }
</style>