Vuejs 嵌套数组属性值的修改

浅浅的花香味﹌ 2022-05-21 06:52 429阅读 0赞

![70][]

这个效果终于实现了！

html的写法：

<x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;" v-for="office,officeIndex in list.offices">
    			
    				<tr style="background-color: #F7F7F7">
    					<th colspan="5" @click="spaceChange(listIndex,officeIndex)">{
       { office.office}}</th>
    				</tr>
    				
    				<tbody>
    					<tr v-if="office.showSpace">
    						<td height="50px;"></td>
    						<td><x-button mini type="primary">基本信息</x-button></td>
    						<td><x-button mini type="primary">工作汇报</x-button></td>
    						<td><x-button mini type="primary">客户档案</x-button></td>
    						<td><x-button mini type="primary">患者档案</x-button></td>
    					</tr>
    				</tbody>
    			
    			</x-table>

在这里是使用的 v-for 的嵌套显示，重点是如何精确的控制每个科室的展开。

我的思路是通过@click方法，定位当前按钮的位置然后显示。

看文档之后，发现v-for有index这个属性，然后翻博客之后发现index属性是可以嵌套的

然后直接用名字就可以直接使用了

![70 1][]

js的写法:

export default {
    	data(){
    		return{
    			lists:[
    			{
    				hospital:'上海市第一医院',
    				offices:[{ 
    					office:'第一科室',
    					showSpace:false
    				},
    				{
    					office:'第二科室',
    					showSpace:false
    				}]
    			},{
    				hospital:'上海市第二医院',
    				offices:[{
    					office:'第一科室',
    					showSpace:false
    				},
    				{
    					office:'第二科室',
    					showSpace:false
    				}]
    			},
    			{
    				hospital:'上海市第三医院',
    				offices:[{
    					office:'第一科室',
    					showSpace:false
    				},
    				{
    					office:'第二科室',
    					showSpace:false
    				}]
    			}
    			]
    		}
    	},
    	methods: {
    		spaceChange (listIndex,officeIndex) {
    			console.log(listIndex+"  "+officeIndex);
    			this.lists[listIndex].offices[officeIndex].showSpace = !this.lists[listIndex].offices[officeIndex].showSpace
    		}
    	},
    	components:{
    		Footer,
    		Header,
    		XTable,
    		LoadMore,
    		XButton,
    		CellBox,
    		Box
    	}
    }
    </script>

这里注意，listIndex和officeIndex的位置，一定要准确

[70]: /images/20220521/390b95e7f64949b795fdf0b22889255f.png
[70 1]: /images/20220521/187d12cd8521460194cccb7e418c018f.png