vue按钮切换

最新推荐文章于 2024-08-23 23:56:16 发布

明阳mark

最新推荐文章于 2024-08-23 23:56:16 发布

阅读量1.2k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36939013/article/details/97273845

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中利用button实现显示和隐藏的切换，关键在于状态控制。文章详细讲解了在Vuex的store.js文件中设置getter方法来实现这一功能。

摘要由CSDN通过智能技术生成

使用button显示隐藏就可以切换了，主要是状态控制

<el-button type="text" :class="{ 'selected-type': isSamplingIssues }" @click="listSamplingIssue">水样采集</el-button>
<el-button type="text" :class="{ 'selected-type': isTrendIssues }" @click="listTrendIssue">趋势分析</el-button>
 <el-main style="text-align:center">
 <el-button type="primary" @click="beginNewIssue" size="small" class="dqcj-btn">发起任务</el-button>
 </el-main>
 <el-table :data="list" @row-click="mapHighlightFlight">
     <el-table-column label="日期" prop="time" width="160px"></el-table-column>
     <el-table-column label="飞行点" prop="location"></el-table-column>
     <el-table-column label="任务状态" prop="state"></el-table-column>
     <el-table-column label="视频">
	     <template slot-scope="{row}">
	       <el-button
	         type="text"
	         size="small"
	         @click="play(row.original)"
	         class="play-btn"
	       >播放</el-button>
	     </template>
    </el-table-column>
 </el-table>

 @flightNamespace.Mutation setIssueType!: (issueType: FlightIssueType) => void
 @flightNamespace.Getter listingIssues!: FlightIssue[];
  get list() {
    return _.map(this.listingIssues, f => {
      return {
        id: f.id,
        droneName: f.droneName,
        location: f.location,
        time: f.startTime
          ? moment(f.startTime).format("YYYY-MM-DD HH:mm")
          : f.schedule,
        state: stateToCN(f.state),
        camera: f.camera,
        airSensor: f.airSensor,
        original: f
      };
    });
  }
 
  listSamplingIssue() {
      this.setIssueType(FlightIssueType.WaterSample)
  }

  listTrendIssue() {
      this.setIssueType(FlightIssueType.WaterTrend)
  }

在store.js里面

  mutations: {
        setIssueType(state, issueType: FlightIssueType) {
            state.listingIssueType = issueType
        }
    },
  getters: {
       listingIssues(state) {
           return state.issues.filter(issue => issue.type == state.listingIssueType)
       }
   },