切换导航时动态切换数据来源 - Vue.js 代码示例

<template>
  <div class='work-talk'>
    <div class='work-talk-name'>
      <PageList
        :pageList='unitList'
        v-bind='unitListConfig'
        propsName='workTalk'
        @update-select-workTalk='handleListSelect($event)'
      />
    </div>
    <div class='work-talk-content'>
      <div class='talk-out-div'>
        <div
          class='talk-card'
          v-for='item in filteredCardData'
          :key='item.index'
        >
          <div class='card'>
            <div class='card-top'>
              <div class='txt'>
                <span>谈话内容：</span>
                {{ item.text }}
              </div>
            </div>
            <div class='card-mid'>
              <span>谈话人：</span>{{ item.talker }}<span>谈话对象：</span>{{ item.conversationPartner }}
              <br />
              <span>地点：</span>{{ item.place }}
              <br />
              <span>时间：</span>{{ item.time }}
            </div>
            <div class='card-bottom'>
              <div class='btn'>
                <div>
                  <div></div>
                  <div>附件下载</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        unitList: [
          {
            name: '办公室',
            num: 8,
            isComplete: true,
          },
          {
            name: '综合规划处',
            num: 9,
          },
          {
            name: '法规处',
            num: 8,
          },
          {
            name: '自然资源调查监测处',
            num: 9,
          },
          {
            name: '自然资源确权登记局',
            num: 8,
          },
          {
            name: '自然资源所有者权益处',
            num: 9,
          },
          {
            name: '自然资源开发利用处',
            num: 8,
          },
          {
            name: '国土空间规划局',
            num: 9,
          },
          {
            name: '国土空间用途管制处',
            num: 8,
          },
          {
            name: '国土空间生态修复处',
            num: 9,
          },
          {
            name: '耕地保护监督处',
            num: 9,
          },
        ],
        unitListConfig: {
          isSelect: true,
          unitListTitles: '',
          selectValue: '厅机关',
          options: [
            {
              value: '厅机关',
              label: '厅机关',
            },
            {
              value: '机关单位名称',
              label: '机关单位名称',
            },
          ],
        },
        cardData: [
          {
            text: '今天我们主要的是谈心谈话，交流一下近期的工作生活情况，一年之计在于春，节后我们要自己给自己制定工作目标，及时从'假日模式'切换到'工作模式'。',
            talker: '邹国清',
            conversationPartner: '曾振华',
            place: '湖南省自然资源厅 中楼 312 会议室',
            time: '2023-2-9  10:00 ',
          },
          {
            text: '进入办公室工作，在各方面都适应很快，表现很好近期有遇到什么困难或问题？',
            talker: '邹国清',
            conversationPartner: '刘双',
            place: '湖南省自然资源厅 中楼 312 会议室',
            time: '2023-2-9 10:30',
          },
          {
            text: '在工作中有什么想法或者问题我们今天谈一谈。',
            talker: '邹国清',
            conversationPartner: '赵勇辉',
            place: '湖南省自然资源厅 中楼 312 会议室',
            time: '2023-2-9 10:50',
          },
          {
            text: '今天我们开展谈心谈话，主要谈一下近期工作中有那些思考。',
            talker: '邹国清',
            conversationPartner: '刘红沙',
            place: '湖南省自然资源厅 中楼 312 会议室',
            time: '2023-2-9 11:10',
          },
          {
            text: '今天开展谈心谈话，主要是交流下近期工作中的想法与思考。',
            talker: '邹国清',
            conversationPartner: '王宁',
            place: '湖南省自然资源厅 中楼 312 会议室',
            time: '2023-2-9 11:30',
          },
          {
            text: '今天我们谈心谈话，有什么想法我们一起探讨一下',
            talker: '邹国清',
            conversationPartner: '倪凌',
            place: '湖南省自然资源厅 中楼 312 会议室',
            time: '2023-2-9 11:50',
          },
        ],
        selectedUnit: 0, // 新增一个属性保存当前选中的导航单位的索引
      };
    },
    computed: {
      filteredCardData() {
        // 根据selectedUnit过滤出对应单位的谈心谈话数据
        const selectedUnitName = this.unitList[this.selectedUnit].name;
        return this.cardData.filter((item) => item.place.includes(selectedUnitName));
      },
    },
    methods: {
      handleListSelect(value) {
        this.unitListConfig.selectValue = value;
        this.selectedUnit = this.unitList.findIndex((item) => item.name === value); // 更新selectedUnit的值
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "@/assets/css/public_module.scss";
  .work-talk {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    background-color: #f4f2f2;
    .work-talk-name {
      width: 240px;
      height: 774px;
    }
    .work-talk-content {
      width: 1540px;
      height: 774px;
      background: #ffffff;
      @include scrollbar;
      @include flex-center;
      .talk-out-div {
        width: 1490px;
        height: 714px;
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        .talk-card {
          width: 470px;
          height: 315px;
          border: 1px solid #b3aaaa80;
          background: #ffffff;
          box-shadow: 0 4px 16px 0 #0000001a;
          margin-left: 15px;
          margin-bottom: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          .card {
            height: 255px;
            width: 410px;
            display: flex;
            flex-direction: column;
            .card-top {
              width: 410px;
              height: 100px;
              border-radius: 4px;
              opacity: 1;
              background: #fbf7f7;
              display: flex;
              justify-content: center;
              align-items: center;
              .txt {
                width: 385px;
                height: 74px;
                color: #333333;
                font-size: 14px;
                font-weight: 400;
                text-align: left;
                line-height: 24px;
                font-family: "微软雅黑";
                :first-child {
                  color: #333333;
                  font-size: 14px;
                  font-weight: 700;
                  text-align: left;
                  font-family: "微软雅黑";
                }
              }
            }
            .card-mid {
              width: 413px;
              height: 125px;
              color: #333333;
              font-size: 14px;
              font-weight: 400;
              font-family: "微软雅黑";
              text-align: left;
              :first-child,
              :nth-child(2),
              :nth-child(4),
              :last-child {
                color: #666666;
                font-size: 14px;
                font-weight: 400;
                font-family: "微软雅黑";
                text-align: left;
                line-height: 40px;
              }
              :nth-child(2) {
                margin-left: 84px;
              }
            }
            .card-bottom {
              width: 413px;
              height: 30px;
              .btn {
                width: 100px;
                height: 30px;
                border-radius: 2px;
                opacity: 1;
                border: 1px solid #d30000;
                background: #ffffff;
                box-shadow: 0 3px 6px 0 #0000001a;
                float: right;
                display: flex;
                justify-content: center;
                align-items: center;
                :first-child {
                  width: 80px;
                  height: 22px;
                  display: flex;
                  flex-direction: row;
                  :first-child {
                    width: 22px;
                    height: 22px;
                    background: url("@/assets/img/testImg/btn.png");
                  }
                  :last-child {
                    width: 58px;
                    height: 22px;
                    color: #d30000;
                    font-size: 14px;
                    font-weight: 400;
                    font-family: "微软雅黑";
                    text-align: left;
                    line-height: 20px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
<p>在下列代码中实现切换导航的时候切换数据来源，可以通过修改<code>cardData</code>的值来实现切换数据来源。</p>
<p>具体实现步骤如下：</p>
<ol>
<li>在<code>data</code>中新增一个属性<code>selectedUnit</code>，用于保存当前选中的导航单位的索引，默认为0。</li>
<li>在<code>computed</code>中新增一个计算属性<code>filteredCardData</code>，用于根据<code>selectedUnit</code>过滤出对应单位的谈心谈话数据。</li>
<li>在模板中修改<code>v-for</code>循环的数据源为<code>filteredCardData</code>。</li>
<li>在<code>handleListSelect</code>方法中更新<code>selectedUnit</code>的值，根据<code>selectedUnit</code>的值来切换数据来源。</li>
</ol>
<p>修改后的代码如下：</p>
<pre><code class="language-html">&lt;template&gt;
  &lt;div class=&quot;work-talk&quot;&gt;
    &lt;div class=&quot;work-talk-name&quot;&gt;
      &lt;PageList
        :pageList=&quot;unitList&quot;
        v-bind=&quot;unitListConfig&quot;
        propsName=&quot;workTalk&quot;
        @update-select-workTalk=&quot;handleListSelect($event)&quot;
      /&gt;
    &lt;/div&gt;
    &lt;div class=&quot;work-talk-content&quot;&gt;
      &lt;div class=&quot;talk-out-div&quot;&gt;
        &lt;div
          class=&quot;talk-card&quot;
          v-for=&quot;item in filteredCardData&quot;
          :key=&quot;item.index&quot;
        &gt;
          &lt;!-- 省略其他代码 --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  data() {
    return {
      unitList: [
        // 省略其他代码
      ],
      unitListConfig: {
        // 省略其他代码
      },
      cardData: [
        // 省略其他代码
      ],
      selectedUnit: 0, // 新增一个属性保存当前选中的导航单位的索引
    };
  },
  computed: {
    filteredCardData() {
      // 根据selectedUnit过滤出对应单位的谈心谈话数据
      const selectedUnitName = this.unitList[this.selectedUnit].name;
      return this.cardData.filter((item) =&gt;
        item.place.includes(selectedUnitName)
      );
    },
  },
  methods: {
    handleListSelect(value) {
      this.unitListConfig.selectValue = value;
      this.selectedUnit = this.unitList.findIndex(
        (item) =&gt; item.name === value
      ); // 更新selectedUnit的值
    },
  },
};
&lt;/script&gt;
</code></pre>
<p>通过以上修改，当切换导航时，会根据选中的单位来过滤出对应的谈心谈话数据，实现切换数据来源的功能。</p>