获取element tabs中绑定的js数据

前情提要

（以下是实现的效果）

背景：使用element的Tabs 标签页框架+引入了js数据。

目的：想要在切换<el-tab-pane>的时候获取每个事件对应的事件，也就是events.time

解决办法

①在<el-tabs>标签中绑定@tab-click="你的方法名"。

②在<el-tab-pane>标签中添加:value="JSON.stringify(你想要获取的数据)"

（疑惑1：查阅资料发现只有在<el-tabs>使用@tab-click才可以获取相应的值，@click和@click.native都没用甚至还会报错，求大佬解答）

（疑惑2：且只能绑定在<el-tabs>标签才可以生效，绑定在<el-tab-pane>标签中没有任何用，求大佬解答）

<el-tabs :tab-position="tabPosition" style="height: 200px;" @tab-click="moveSliderTo">
          <!-- 使用 v-for 循环遍历 events 数组 -->
          <el-tab-pane v-for="(event, index) in events" :key="index" :label="event.smallTiele" :value="JSON.stringify(event.time)" >
            <div>
              <h3>{{ event.title }}</h3>
              <p>时间：{{ event.time }}</p>
              <p>{{ event.content }}</p>
              <img :src="event.image" alt="">
            </div>
          </el-tab-pane>
        </el-tabs>

③在methods中添加你的方法

     methods: {
         moveSliderTo(el) {
          this.currentTab = el.$attrs.value // 对应的就是item的完整对象。
          this.eventTime = el.$attrs.value.time
          console.log(this.currentTab)
          console.log("eventTime:", this.eventTime)
        },
    }

注意！以下代码中的this.eventTime打印出来是undefined，不可以在el.$attrs.value后面直接追加（也可能是我没找对，我是直接在:value="JSON.stringify(你想要获取的数据)"中直接写的events.time，如果是写events的话，就是获取的整个json数据）

参考文章：element tabs 的tab-click点击事件怎样取到更多参数-CSDN博客

知识点讲解

JSON对象

JSON.stringify是日常开发中经常用到的 JSON对象中的一个方法，JSON对象包含两个方法：一是用于解析成 JSON对象的 parse()；二是用于将对象转换为JSON字符串方法的stringify()。

JSON.stringify() 方法

将一个 JavaScript 对象或值转换为 JSON 字符串，默认该方法其实有三个参数：第一个参数是必选，后面两个是可选参数非必选。

第一个参数传入的是要转换的对象；第二个是一个replacer函数，比如指定的 replacer 是数组，则可选择性地仅处理包含数组指定的属性，如果指定一个 replacer 函数，则可以选择性地替换值；第三个参数用来控制结果字符串里面的间距，后面两个参数整体用得比较少。
语法:

JSON.stringify(value[, replacer [, space]])

value :要转换的值。
replacer :如果该参数是一个函数，则在序列化过程中，被序列化的值的每个属性都会经过该函数的转 换和处理；如果该参数是一个数组，则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中；如果该参数为 null 或者未提供，则对象所有的属性都会被序列化。
space : 指定缩进用的空白字符串。

JSON.parse

JSON.parse 方法用来解析 JSON字符串，构造由字符串描述的 JavaScript值或对象。该方法有两个参数：第一个参数是需要解析处理的JSON字符串，第二个参数是可选参数提供可选的 reviver函数，用在返回之前对所得到的对象执行变换操作。

语法：

JSON.parse(text[, reviver])

最后

我是一名大二的计科女大学生，希望大家相互沟通交流，学习进步哦o(*￣▽￣*)ブ~