【在列表中插入文字链接选项，点击后通过对应的参数跳转到相应的位置】

本文展示了如何在Vue.js应用中实现下拉框选择消息类型，并根据选择跳转到对应页面。通过el-select组件创建消息类型选择，利用router-link进行动态路由，并在el-table-column中根据消息类型显示不同的操作链接，如故障提醒跳转到设备故障页面，补货提醒跳转到补货详情页面。同时，详细介绍了如何在表格中处理和展示这些数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Tab中加入一列‘消息类型’，其中包含五中子类型，点击后跳转到对应的页面查看详情，如下图所示
在这里插入图片描述

下拉框

<div class="" style="margin-bottom:10px;margin-right:30px;">
  <span class="screen_name" style="margin-right:10px;">消息类型</span>
  <el-select v-model="msgType" style="width:150px;" clearable @change="changeScreen" placeholder="请选择">
    <el-option
         v-for="group in msgTypeAll"
         :key="group.value"
         :label="group.label"
         :value="group.value"
         class="screen_lab">
     </el-option>
	</el-select>
</div>

.......
data(){
	return{
	.....
	 msgType: [],
      msgTypeAll: [{
        value: '1',
        label: '故障提醒'
      }, {
        value: '2',
        label: '补货提醒'
      }, {
   ......
      }],
	.....
	}
}
methods{
 changeScreen() {
      let query = {
        msgType: this.msgType,
      };
      this.pushQuery(query);
      this.getTable(1);
    },
 getTable(curr) {
      this.loading = true;
      const that = this;
      this.get('franchiseeMessages/query', {
       .....
        msgType: this.msgType,
       .......
      })
    }
    ..........
  }
    ............
mounted() {
    this.pullQuery();
    this.getTable(1);
  }

Tab表单中添加一列

/*列头：消息类型*/
<el-table-column prop="messageType" label="消息类型" align="center" width="120">
 <template slot-scope="scope">
    /*种类1：故障提醒*/
    /*router-link相当于a标签、 v-if判断类型msgType、 :to跳转到指定路由页面{路径+跳转参数}*/
    <router-link type="text" class="router_hover" v-if="scope.row.msgType == 1"
     			 :to="{path: '/equipment_failure',query:{ condition:scope.row.serviceMachineName}}">故障提醒
    </router-link>
     /*种类2：补货提醒*/
    <router-link type="text" class="router_hover" v-else-if="scope.row.msgType == 2"
                 :to="{path: '/replenishment_detail',query:{ serviceMachineId:scope.row.msgId}}">补货提醒
    </router-link>
................
  </template>
</el-table-column>