el-element中el-table表格嵌套el-select实现动态选择对应值功能
作者:咩咩可以很温柔
这篇文章主要给大家介绍了关于el-element中el-table表格嵌套el-select实现动态选择对应值功能的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
先看问题还原图:
问题描述:
小编在做需求时,遇到了在el-table表格中加入多条数据,并且每条数据要通过el-select来选取相应的值,做到动态选择。
解决方法:
思路:
- 最开始,小编的实现效果是左边红色框的效果,选择其中一个时,其他的也对应赋值。
- 主要是因为el-option的选项都是相同的,v-model 的值也是相同的。
- 那让每一条 v-model 的值不同不就好了么!!
代码:
html中代码:
<el-table-column label="文档类别" prop="categoryName"> <template slot-scope="scope"> <el-select :ref="'categoryName' + scope.$index" v-model="tableData[scope.$index]['categoryName']" placeholder="请选择文档类别" clearable > <el-option :value="tableData[scope.$index]['categoryName']" style="height: auto"> <el-tree :ref="'categoryNameTree' + scope.$index" :data="typeList" node-key="id" :props="typeTreeProps" @node-click="getTypeList(scope.$index)" > <span slot-scope="{ node }">{{ node.label }}</span> </el-tree> </el-option> </el-select> </template> </el-table-column>
代码解说:
在 < el-table > 中绑定数据 :data="tableData" tableData 为数组
el-select中
- scope.$index ----- 为tableData中每条数据的下标
- :ref="'categoryName' + scope.$index" ----- 设置 ref ,用户选择完值后 el-option 自动隐藏
- v-model="tableData[scope.$index]['categoryName']" ----- 绑定动态的 v-model ,很重要。要注意的是 tableData[scope.$index] 是通过下标找当数组tableData中当前选择的数据。而这个 categoryName 参数必须是数组 tableData 中存在的。
el-option中
- :value="tableData[scope.$index]['categoryName']" ----- 与 v-model 相同,绑定动态值
el-tree中
:ref="'categoryNameTree' + scope.$index" ----- 与 el-select 中 ref 相同
@node-click="getTypeList(scope.$index)" ----- 选择数据时触发,传当前元素的下标
data中:
data() { return { tableData: [] // 接口返回的数据,:data绑定在el-table中 typeList: [], // 接口返回的数据,展现在el-option中,用el-tree包裹 typeTreeProps: { children: 'children', label: 'name' }, categoryName: '' } }
methods中:
getTypeList(index) { // .getCurrentKey()获取到当前要选择节点的key值 // 使用此方法必须设置 node-key 属性,若没有节点被选中则返回 null const nodeId = this.$refs['categoryNameTree' + index].getCurrentKey() // .getNode(nodeId) 根据 data 或者 key 拿到 Tree 组件中的 node const node = this.$refs['categoryNameTree' + index].getNode(nodeId) // 根据index给当前元素的categoryName参数赋值 this.$set(this.tableData[index], 'categoryName', node.label) this.$set(this.tableData[index], 'categoryNo', node.data.docTypeNo) // 此时页面上已经可以动态选择 // 这一步是通过判断当前元素的v-model是否有值来控制el-option是否隐藏 if (this.tableData[index].categoryName) { // .blur()用来隐藏当前展开的下拉选择框 this.$refs['categoryName' + index].blur() } },
this.$refs['categoryName' + index] 设置动态是因为,在有多条数据时,如果不是动态的,但凡有没有值的选择框,就不会触发。而这样就可以通过index来判断隐藏那条元素。
总结:
遇到新的问题就会有新的知识增加,其实入职后有很多很多值得学习,并且记住的知识,但都因年底的原因,项目要保证封版后bug都解决掉而忙忘掉,翻回来去想记录的时候又不从下手。
到此这篇关于el-element中el-table表格嵌套el-select实现动态选择对应值功能的文章就介绍到这了,更多相关el-table表格动态选择对应值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- element表格el-table实现虚拟滚动解决卡顿问题
- Vue+EleMentUI实现el-table-colum表格select下拉框可编辑功能实例
- vue element-ui实现el-table表格多选以及回显方式
- 关于Element-ui中el-table出现的表格错位问题解决
- element el-table表格的二次封装实现(附表格高度自适应)
- VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
- VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
- element el-table如何实现表格动态增加/删除/编辑表格行(带校验规则)