Vue之 el-select结合v-if动态控制template显示隐藏

背景: 根据(取值方式)select框中当选择项:

         1:范围匹配的时候,(取值)显示两个输入框(上线,下线);
          2:精确匹配的时候,(取值)显示一个输入框(精确)

二:代码实现

 

<el-table-column label="取值方式" min-width="100" align="center">
	<template scope="scope">
		<el-select v-model="scope.row.extractMode" clearable placeholder="请选择">
			<el-option v-for="item in extractModeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
		</el-select>
	</template>
	</el-table-column>
	<el-table-column label="取值" min-width="300" align="center">
	<template scope="scope"> <!-- v-if="!showExactMactchInput0" -->
		<div v-if="scope.row.extractMode== 'range' || scope.row.extractMode== 'fuzzy'"><!--  -->
			<el-input size="small" class="limitTable" type="number" v-model="scope.row.lowerLimit" placeholder="请输入下限内容"></el-input>
			-
			<el-input size="small" class="limitTable" type="number" v-model="scope.row.upperLimit" placeholder="请输入上线内容"></el-input>
		</div>
		<div v-else-if="scope.row.extractMode== 'exacts' || scope.row.extractMode== 'exclude' " > <!-- v-bind:id="'exactlist-' + scope.$index" ref="'exactlist-' + scope.$index" -->
			<el-input size="small" class="exactTable2" v-model="scope.row.exactMatch" placeholder="请输入精确内容"></el-input>
		</div>
	</template>
	</el-table-column>
	<el-table-column label="操作" align="center">
	<template slot-scope="scope">
		<el-button circle type="success" icon="el-icon-circle-plus" @click="handleLabelRowClone(scope.$index, scope.row)"></el-button>
		<el-button type="danger" icon="el-icon-remove" circle @click="handleLabelRowDelete(scope.$index, scope.row)"></el-button>
	</template>
</el-table-column>

贴图 

ps: 由于更入手vue,很多语法没仔细看文档,导致入坑不少;很多很简单的语法会耽搁时间;切记切记。

(坑:1:原本想用scope.$index[下标]作为标识从而v-if判断;经过实验变量无法进行赋值(弃之)

2:用v-bind:id【scope.$index】 进行dom控制style.display;考虑到vue本身仅关注视图层;方式不优好。(弃之)

3:恍惚间,每一行都独立不就是【scope.$index】【scope.row】是同样的;这样也不用监听v-select的change event。(用之)

)

--------------------------20190604(今天失去见你的机会)-----------------------------------------

v-if/else template任务状态{1,2,3};当完成==3时,跳转ftp://

 <el-table-column label="任务状态" prop="taskStatus">
    <template slot-scope="scope">
	<span v-if="scope.row.taskStatus=='3'" class="c-click" @click="hrefFtpUrl(scope.row)">            {{statusObj[scope.row.taskStatus] + scope.row.exportUrl}}</span>
    <span v-else >{{statusObj[scope.row.taskStatus]}}</span>
    </template>
		</el-table-column>

 

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值