用vue实现两级联动select

最新推荐文章于 2025-06-08 11:15:36 发布

原创

最新推荐文章于 2025-06-08 11:15:36 发布 · 1.1w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #select

本文介绍了如何使用Vue来实现两级联动的select选择器。通过监听一级分组的选择，动态加载对应的二级分组数据，最终展示选定分组的常用短信内容。涉及到的关键技术包括计算属性(computed)和v-show指令。

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

最近客户有一个需求：讲“常用短信”按照按照分组进行管理，选择一级分组的名称，显示这个父级分组的底下的所有常用短信内容，再选择子分组，精确显示这个子分组底下的常用短信。
先贴代码吧：

<template>
    <div>
        <headertop :leftFont="$router.name" ></headertop> 
        <h3>{
  
  {sort}}</h3>
        <table class="am-table am-table-compact am-table-bordered">
            <tr>
                    <td colspan="3">
                        <select v-model="defaultGroup">
                            <option value="all">所有</option>
                            <option v-for="option in comGroups" :value="option.id">
                                {
  
  { option.gname }}
                            </option>
                        </select>
                        <select v-show="defaultGroup!='all'" v-model='finalChoose' >
                            <option value="">请选择</option>
                            <option v-for="option in selection" :value="option.id">
                                {
  
  { option.gname }}
                            </option>
                        </select>
                    </td>
            </tr>
            <tbody>
                <tr v-for="(item,index) in commonSms" v-show="defaultGroup=='all'?true:(finalChoose!=''?item.gid==finalChoose:commonSms[index].gid==defaultGroup)">
                    <td>{
   
   {item.sms_content}}</td>
                    <td><input type="checkbox" name="" :id="item.gid"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script>
import headertop from '@/components/headertop'
export default {
    name:"sort",
    props:{
        title:{
            type:String,
            default:""
        }
    },
    watch:{
        defaultGroup:function(oldVua,newVua){
   
   
            this.finalChoose='';
        }
    },
    computed:{
        selection:function(){
   
   
            if(this.defaultGroup=='all'){
                return [];
            }else{
                return this.comGroups.filter((item)=>{
                    return item.id == this.defaultGroup
                })[0].twoStageGroup
            }

        }
    },
    data () {
        return {
            sort: 'sort',
            defaultGroup:'all',
            finalChoose:'',
            commonSms:[{
   
   "id":"302","gid":"75","sms_content":"\u8fd9\u662f111 \u7684\u77ed\u4fe1","gname":"111"},{
   
   "id":"303","gid":"73","sms_content":"\u8fd9\u662f\u5206\u7ec48\u7684\u77ed\u4fe1","gname":"\u5206\u7ec48"},{
   
   "id":"304","gid":"11","sms_content":"\u8fd9\u662f\u5206\u7ec46\u7684\u77ed\u4fe1","gname":"\u5206\u7ec46"},{
   
   "id":"305","gid":"6","sms_content":"\u8fd9\u662f\u5206\u7ec41 \u7684\u77ed\u4fe1","gname":"\u5206\u7ec41"},{
   
   "id":"309","gid":"8","sms_content":"\u6d4b\u8bd51","gname":"\u5206\u7ec43"},{
   
   "id":"311","gid":"11","sms_content":"\u662f\u5426\u6536\u5230\u8fc7\u8bd5\u8bd5","gname":"\u5206\u7ec46"},{
   
   "id":"312","gid":"10","sms_content":"\u6d4b\u8bd54","gname":"\u5206\u7ec45"},{
   
   "id":"313","gid":"11","sms_content":