项目场景:

最近突发奇想:vue 在html中怎么定义变量?

<template>
	<div class="tr" v-for="(row, rowIndex) in data" :key="rowIndex">
                <div class="td " v-for="(column, colIndex, value) in columns" :key="colIndex" >
                    <span style="display: none;"></span>
                    <slot :row="row" :rowIndex="rowIndex" 
                        :column="column" :colIndex="colIndex"
                        :value="row[column.prop]"
                        v-if="column.slotName" 
                        :name="column.slotName" />
                        
                    <div v-else class="popper_item_container"
                        @mouseover="mouseover($event, typeof column == 'string' ? row[column] : row[column.prop])"
                        @mouseleave="mouseleave"
                        :style="{width: column.width}">
                        {{ typeof column == "string" ? row[column] : row[column.prop] }}
                    </div>
                            
                </div>
            </div>
</template>

typeof column == “string” ? row[column] : row[column.prop]这句代码多次用到,如果能付给一个变量就好了

思路:

开始想在代码中直接加{{ 变量a = typeof column == “string” ? row[column] : row[column.prop]}},理论上将,此时的变量a应该是this的一个属性,是一个全局的(对于当前页面来说)。所以处于for循环中的变量a,最终只能是循环最后一个值,就会导致某些地方显示出现问题。
然后觉得用render()这个东西再js写模板应该不会有现在这种尴尬吧,为了这个问题要重写吗,应该还有别的决绝方案。


解决方案:

<div class="tr" v-for="(row, rowIndex) in data" :key="rowIndex">
                <div class="td " v-for="(column, colIndex, value) in columns" :key="colIndex" >
                <!--最终在for循环中加了个value参数来声明变量,
                在此加了个隐藏的span来赋值
                (应该可以在第一次用的地方赋值,
                其他地方就可以直接使用value)-->
                    <span style="display: none;">{{ value = typeof column == "string" ? row[column] : row[column.prop] }}</span>
                    <slot :row="row" :rowIndex="rowIndex" 
                        :column="column" :colIndex="colIndex"
                        :value="row[column.prop]"
                        v-if="column.slotName" 
                        :name="column.slotName" />
                        
                    <div v-else class="popper_item_container"
                        @mouseover="mouseover($event, value)"
                        @mouseleave="mouseleave"
                        :style="{width: column.width}">
                        {{ column.format? column.format({value, row, rowIndex, column, colIndex}) : value }}
                    </div>
                            
                </div>
            </div>

突然来的灵感,虽然不是什么正统写法,但也可解决问题。
有大神知道这类问题有什么正统写法,欢迎留言赐教。

Logo

前往低代码交流专区

更多推荐