自制用Vue框架实现table切换功能 手写 vue实现

首先，需要对HTML结构格式进行书写，table标签头如下：

<ul class="yulandParkDtlTabBtn">

            <li

              v-for="(spanNames,index) in spanNameList"

              class="spanList"

              :class="{active:num==index}"    //当num==index为true时，table头添加类名active，以此实现头部高亮色

              :class="[num==index ? ' active'  : ' spanList ' ]"    此法为数组写法，两种添加随自己喜欢自己选择

              @click="table(index)"

            >{{spanNames}}</li>

 </ul>

接下来是table内容，class样式根据自己需要自己书写css

<div class="yulandParkDtlTabCon">

               <div v-if="num==0" class="plotAreaNearTwo">内容一</div>

              <div v-if="num==1" class="plotAreaNearTwo">内容二</div>

              <div v-if="num==2" class="plotAreaNearTwo">内容三</div>

</div>

接下来是vue中data的书写，

data() {

    return {

      spanNameList: ["园区小镇概况", "读地手册","地块介绍"],

      num: 0,

    };

  },

然后是methods方法书写，如下：这种写法是告诉你实行切换可以调用不同的方法以此来解决不同的问题需求：

methods：{

table(index) {

      let self = this;

      self.num = index;

      if (self.num == 0 || self.num == 1) {

        switch (self.num) {

          case 0:

             self.listByareaList111();

            break;

          case 1:

             self.listByareaList222();

            break;

          default:

            break;

        }

      } else if (self.num == 2) {

        self.listByareaList333();

      }

    },

}

好了，到这就已经总结完成了，希望可以帮到大家。不懂可留言！！！