vue中table表格实现select下拉框,table下拉框(select)选项选中禁用
实现一个下拉弹窗功能
·
文章目录
实现功能与效果图片展示
a. table中实现可编辑下拉框
先上代码哈哈哈
<div class="serve" style="width: 100%; overflow: hidden">
<div class="table-btn"> <el-button class="btn" size="mini" type="primary" plain icon="el-icon-plus" @click="handleAdd" /></div>
<el-table ref="tableRef" class="table-form" :height="height" style="width: 100%" border :data="form.tagArr">
<el-table-column
v-for="item in columns"
:key="item.prop"
:prop="item.prop"
:label="item.label"
:width="item.width"
:min-width="item.minWidth"
:formatter="item.formatter"
align="center"
show-overflow-tooltip
>
<template slot-scope="{ row, $index }"> //row是每行绑定的数据. $index是每行索引
<el-select v-if="item.prop === 'tagName'" v-model="row[item.prop]" size="mini" @change="changeTag(row)">
<el-option v-for="mtItem in settingTagSelect(row, $index)" :key="mtItem.value" :disabled="mtItem.disabled" :label="mtItem.label" :value="mtItem.value" />
</el-select>
<template v-else-if="item.prop === 'tagValue'" class="table-row">
<el-select v-if="row.tagName !== 'lineName'" v-model="row[item.prop]" size="mini" style="width: 150px; margin-right: 5px" :rules="rules.commonRequired">
<el-option v-for="mtItem in row.tagOptions || []" :key="mtItem.value" :label="mtItem.label" :value="mtItem.value" />
</el-select>
<el-input v-else v-model="line" placeholder="请输入内容" style="width: 150px; margin-right: 5px" />
<el-tooltip :enterable="false" :open-delay="300" :content="$t('common.delete')">
<el-button class="btn" icon="el-icon-minus" type="danger" plain size="mini" @click="handleDel(row,$index)" />
</el-tooltip>
</template>
</template>
</el-table-column>
</el-table>
</div>
columns: [
{ label: 'Tag名称', prop: 'tagName', width: 150 },
{ label: 'Tag值', prop: 'tagValue' }
],
b.根据不同选项决定某列是: 输入框/下拉框
【row.tagName表示的是列名】
c.选择不同选项 决定不一样的下拉选项组
实现思路:chang事件在每次下拉框的选择都会触发,触发后传递row也就是当前行的数据(这里有每列的列名和对应绑定的值),我们根据选项不同,往里面新增一个tagOptions数组 就可以啦。
不懂得打印row认真看看就知道辽~~~
changeTag(row) {
// 映射
const keyMap = {
//选中的值 : 决定的下拉数组
direction: this.testDirectionOptions,
level: this.testLevelOptions,
target: this.testTargetOptions
}
this.$set(row, 'tagValue', '') //先清空之前选过的选择值
this.$set(row, 'tagOptions', keyMap[row.tagName] || [])
},
keyMap[row.tagName]是映射 当row.tagName的值是level,返回 this.testLevelOptions数组。
this.$set(row, 'tagOptions', keyMap[row.tagName] || [])
【往row对象中添加一个tagOptions对象,值就是keyMap[row.tagName], 映射不存在返回空数组】
这样就可以实现根据选择的选项不同来 决定另外一列的下拉选项的数据啦~~
d. select下拉选项在table中选中禁用的实现 (只允许选择一次)
【废话一下】实现此功能要考虑,选择选项之后disabled禁用,当切换选项的时候,需要把选中的禁用还需要把之前禁用的取消禁用。
// 处理复选框禁止重复勾选的方法
settingTagSelect(row) {
const tagNameArr = this.form.tagArr.filter(el => el.tagName).map(el => el.tagName)
const tag = this.tagData
// 设置该行disable
tag.forEach(item => {
item.disabled = tagNameArr.includes(item.value) && item.value !== row.tagName
})
console.log(tag)
return tag
}
【this.form.tagArr就是table绑定的数组】
this.form.tagArr.filter(el => el.tagName) 过滤出tagArr数组的对象中存在tagName属性的对象数组,存在说明就是用户选选择的
.map(el => el.tagName) 数组中取出tagName的值组成新的数组tagNameArr
遍历表格this.tagData来进行对比,设置disabled。
e.删除行数据
handleDel(row, index) {
// 删除指定位置的数据 index每行的索引
this.form.tagArr.splice(index, 1)
},
小菜鸡的第一次分享,觉得有帮助的yy们可以点个赞支持一下哦~
更多推荐
已为社区贡献1条内容
所有评论(0)