最近写了一个小功能,比较有意思,特此博客记录。
提出需求:需要表头字段变化,但是我在官网上的表格相关上查找,没有发现便捷方法。
于是我有两个想法:1.做三个不同的表格。2.做一个表格使用不同的表头字段。
方法一可想而知代码会比较冗余,而且只改一个字段,改动不大。于是我采用的是方法二,字段替换。这里使用的是组件Element - The world's most popular Vue UI frameworkTabs的切换。使用当前选择的项不同而切换不同的表头字段。可以通过3个不同的v-if来判断显示的表头,这并不难。难点在于,他可以添加行,每行的数据都是通过一个下拉或者是组件来选择相应的值,我们如何区别每行的值使他们可以相互不影响才是首要解决的问题。
<el-tabs v-model="activeName" @tab-click="handleClick"><el-tab-pane label="职务层次" name="first"></el-tab-pane><el-tab-pane label="职称等级" name="second"></el-tab-pane><el-tab-pane label="公务员职级" name="third"></el-tab-pane></el-tabs>
<el-table-column prop="level" align="center" label="职务层次" v-if="activeName=='first'"><template slot-scope="scope"><el-select class="my-el-select my-el-selec-2" v-model="scope.row['level']"clearable placeholder="请选择职务层次" size="small"><el-option v-for="item in positionLevelArr" :key="item.level1" :label="item.zjmc" :value="item.zjmc"></el-option></el-select></template></el-table-column><el-table-column prop="level" align="center" label="职称等级" v-if="activeName=='second'"><template slot-scope="scope"><el-selectv-model="selectedZyjszcdj[scope.row.id]"filterablesize="small"placeholder="请选择职称等级"clearableclass="my-el-select my-el-select-1 gwyzjInput"@focus="zcdjOptionsFocus"><el-optionv-for="item in zyjszwdjData":key="item":label="item":value="item"></el-option></el-select></template></el-table-column><el-table-column prop="level" align="center" :label="isShowSoSpTitle ? '现管理职级' : '公务员职级'" v-if="activeName=='third'"><template slot-scope="scope"><el-input class="my-el-select my-el-select-1 gwyzjInput" size="small" placeholder="请选择"v-model="scope.row.A0192Estring" clearable @focus="showOfficcerType(scope.row)" @change="getA0192Estring"></el-input></template></el-table-column>
为解决上面提出的痛点,以图二为例,在data中定义一个对象selectedZyjszcdj。
我们给每个下拉框绑定的值为selectedZyjszcdj[scope.row.id],在 Vue 中,v-model
指令用于实现表单控件的双向数据绑定。当 v-model
被用在一个数组或对象的属性上时,它会动态地更新这个属性的值。
这里的 selectedZyjszcdj
是一个对象,而 scope.row.id
是用来索引这个对象的一个动态键名。scope.row
通常是在组件的模板中使用 v-for
循环遍历数据时,循环体内部可用的一个局部变量,它包含了当前迭代项的数据和一些元信息。
具体来说:
-
selectedZyjszcdj
是一个在 Vue 组件的data
函数中定义的对象,用来存储每个scope.row.id
对应的值。 -
scope.row.id
是从当前循环项获取的唯一标识符,通常用于区分不同的数据记录。 -
当用户在表单控件中输入或选择了一个值时,
v-model
将把新值赋给selectedZyjszcdj
对象中以scope.row.id
为键的属性。
例如,如果 scope.row.id
的值是 123
,那么上述 v-model
实际上就是在绑定到 selectedZyjszcdj[123]
这个特定的属性上。
使用这种模式常用于处理表格或列表中的数据编辑,其中每一行可能需要独立的数据绑定。
所以这便解决了我们的问题,尤其可见,遇见问题不可怕,有思考有想法才是最重要的。剩下的一步一脚印!