对于Tab控件：虽然用户对tabpanel定义了tabkey，但是返回值仍然是默认的0,1,2，用户的定义没有生效

yuyaning commented 5 years ago

问题描述

对于Tab控件：虽然用户对tabpanel定义了tabkey(例如98，99，100)，但是返回值仍然是默认的0,1,2，用户的定义没有生效

产生环境

**使用版本：-最新版本
**引入方式：NPM
**演示地址：见下面的源程序，作者可以放到任意程序中加载

提示错误信息

对于综合、最热、最新三个tabpanel，分别定义tabkey是98、99、100，但是当切换后取出值，发现tabkey并不是预期值，而变成了0,1,2

代码区域

  <div>
    <yd-tab :callback="mainTabChanged">
      <yd-tab-panel label="关注" tabkey="0">
        <yd-tab horizontal-scroll :callback="focusTabChanged">
          <yd-tab-panel label="综合" tabkey="98"></yd-tab-panel>
          <yd-tab-panel label="最热" tabkey="99"></yd-tab-panel>
          <yd-tab-panel label="最新" tabkey="100"></yd-tab-panel>
        </yd-tab>
      </yd-tab-panel>
      <yd-tab-panel label="发现" tabkey="1">
        <yd-tab horizontal-scroll :callback="findTabChanged">
          <yd-tab-panel label="足球"></yd-tab-panel>
          <yd-tab-panel label="篮球"></yd-tab-panel>
        </yd-tab>
      </yd-tab-panel>
    </yd-tab>
    <div style="margin-bottom:1.1rem">
      <yd-list theme="3">
        <yd-list-item v-for="item, key in list" :key="key">
          <img slot="img" :src="item.img" />
          <span slot="title">{{item.title}}</span>
          <yd-list-other slot="other">
            <div>
              <span class="demo-list-price">
                <em>¥</em>
                {{item.price}}
              </span>
              <span class="demo-list-del-price">¥{{item.w_price}}</span>
            </div>
            <div>content</div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>
    </div>

  </div>
</template>

<script type="text/babel">

export default {
  data() {
    return {
      selected: 1,
      list: [
        {
          img: "//img1.shikee.com/try/2016/06/23/14381920926024616259.jpg",
          title: "标题111标题标题标题标题",
          price: 156.23,
          w_price: 89.36
        }
      ]
    };
  },
  mounted() {
    console.log("start");
    //this.fetchData()
  },
  methods: {
    mainTabChanged(name, tabindex) {
      console.log(name + "-" + tabindex);

    },
    focusTabChanged(name, tabindex) {
      console.log(name + "-" + tabindex);
      console.log("定义了98/99/100三个key，但是返回值仍然是0/1/2");
    },
    findTabChanged(name, tabindex) {
      console.log(name + "-" + tabindex);

    }
  }
};
</script>

lijianglin2015 commented 4 years ago

你找到解决的办法了吗？我也卡在这里了，我这需求是进入页面，定位到设定好的tabkey位置，可是一直不行，初始化不了如： ~ KWJM19GCC0CW8626~U 98

weidong2017 commented 4 years ago

yes

------------------ 原始邮件 ------------------ 发件人: "lijianglin2015"<notifications@github.com>; 发送时间: 2019年11月6日(星期三) 晚上11:25 收件人: "ydcss/vue-ydui"<vue-ydui@noreply.github.com>; 抄送: "Subscribed"<subscribed@noreply.github.com>; 主题: Re: [ydcss/vue-ydui] 对于Tab控件：虽然用户对tabpanel定义了tabkey，但是返回值仍然是默认的0,1,2，用户的定义没有生效 (#767)

你找到解决的办法了吗？我也卡在这里了，我这需求是进入页面，tab 初始化后tab 定位到设定好的tabkey位置，可是一直找不到设定好的tabkey,。如:tab的几个栏目，设置的tabkey分别为:88，99，100，进入到页面后，定位在99标题，可是设置了值找不到，值貌似只有0，1，2

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

yuyaning commented 4 years ago

作者没有fix这个问题，我只好想了下面的办法绕过去：在data里存储每个tab的标题和对应的键值，在点击事件里通过标题在上面的数据结构里查找出对应的键值，也就是tabkey，至少我的程序可以工作了，你看看行不行？

----- 原始邮件 ----- 发件人：weidong2017 notifications@github.com 收件人：ydcss/vue-ydui vue-ydui@noreply.github.com 抄送人：yuyaning gannanguilai@sina.com, Author author@noreply.github.com 主题：Re:_[ydcss/vue-ydui]对于Tab控件：虽然用户对tabpanel定义了tabkey，但是返回值仍然是默认的0,1,2，用户的定义没有生效(#767) 日期：2019年11月07日 10点19分

yes

------------------ 原始邮件 ------------------

发件人: "lijianglin2015"<notifications@github.com>;

发送时间: 2019年11月6日(星期三) 晚上11:25

收件人: "ydcss/vue-ydui"<vue-ydui@noreply.github.com>;

抄送: "Subscribed"<subscribed@noreply.github.com>;

主题: Re: [ydcss/vue-ydui] 对于Tab控件：虽然用户对tabpanel定义了tabkey，但是返回值仍然是默认的0,1,2，用户的定义没有生效 (#767)

你找到解决的办法了吗？我也卡在这里了，我这需求是进入页面，tab 初始化后tab 定位到设定好的tabkey位置，可是一直找不到设定好的tabkey,。

如:tab的几个栏目，设置的tabkey分别为:88，99，100，进入到页面后，定位在99标题，可是设置了值找不到，值貌似只有0，1，2

—

You are receiving this because you are subscribed to this thread.

Reply to this email directly, view it on GitHub, or unsubscribe.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

lijianglin2015 commented 4 years ago

你的那个tab组件可以实现获取tabkey，你在他的:item-click事件中把key赋值给data，然后组件会触发 :callback 事件，在这里面可以取到设定的tabkey值，也就是返回值key。今天我也用watch，和set方法把我自己的解决了，初始化组件后指到所需要的tab位置。不过用的是list遍历，找到对应的ID匹配，然后把下标值传给了tab组件的v-model，来实现目的

yuyaning commented 4 years ago

好，我试试。 ----- 原始邮件 ----- 发件人：lijianglin2015 notifications@github.com 收件人：ydcss/vue-ydui vue-ydui@noreply.github.com 抄送人：yuyaning gannanguilai@sina.com, Author author@noreply.github.com 主题：Re:_[ydcss/vue-ydui]对于Tab控件：虽然用户对tabpanel定义了tabkey，但是返回值仍然是默认的0,1,2，用户的定义没有生效(#767) 日期：2019年11月07日 23点48分

你的那个tab组件可以实现点击tab，你在他的:item-click事件中把key赋值给data，然后组件会触发 :callback 事件，在这里面可以取到设定的tabkey值

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

ydcss / vue-ydui