商城微信网站怎么做,做神马网站优化排名,百度指数批量查询,网站模仿算侵权吗最近写了一个小功能#xff0c;比较有意思#xff0c;特此博客记录。 提出需求#xff1a;需要表头字段变化#xff0c;但是我在官网上的表格相关上查找#xff0c;没有发现便捷方法。
于是我有两个想法#xff1a;1.做三个不同的表格。2.做一个表格使用不同的表头字段。…最近写了一个小功能比较有意思特此博客记录。 提出需求需要表头字段变化但是我在官网上的表格相关上查找没有发现便捷方法。
于是我有两个想法1.做三个不同的表格。2.做一个表格使用不同的表头字段。
方法一可想而知代码会比较冗余而且只改一个字段改动不大。于是我采用的是方法二字段替换。这里使用的是组件Element - The worlds most popular Vue UI frameworkTabs的切换。使用当前选择的项不同而切换不同的表头字段。可以通过3个不同的v-if来判断显示的表头这并不难。难点在于他可以添加行每行的数据都是通过一个下拉或者是组件来选择相应的值我们如何区别每行的值使他们可以相互不影响才是首要解决的问题。 el-tabs v-modelactiveName tab-clickhandleClickel-tab-pane label职务层次 namefirst/el-tab-paneel-tab-pane label职称等级 namesecond/el-tab-paneel-tab-pane label公务员职级 namethird/el-tab-pane/el-tabs el-table-column proplevel aligncenter label职务层次 v-ifactiveNamefirsttemplate slot-scopescopeel-select classmy-el-select my-el-selec-2 v-modelscope.row[level]clearable placeholder请选择职务层次 sizesmallel-option v-foritem in positionLevelArr :keyitem.level1 :labelitem.zjmc :valueitem.zjmc/el-option/el-select/template/el-table-columnel-table-column proplevel aligncenter label职称等级 v-ifactiveNamesecondtemplate slot-scopescopeel-selectv-modelselectedZyjszcdj[scope.row.id]filterablesizesmallplaceholder请选择职称等级clearableclassmy-el-select my-el-select-1 gwyzjInputfocuszcdjOptionsFocusel-optionv-foritem in zyjszwdjData:keyitem:labelitem:valueitem/el-option/el-select/template/el-table-columnel-table-column proplevel aligncenter :labelisShowSoSpTitle ? 现管理职级 : 公务员职级 v-ifactiveNamethirdtemplate slot-scopescopeel-input classmy-el-select my-el-select-1 gwyzjInput sizesmall placeholder请选择v-modelscope.row.A0192Estring clearable focusshowOfficcerType(scope.row) changegetA0192Estring/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] 这个特定的属性上。
使用这种模式常用于处理表格或列表中的数据编辑其中每一行可能需要独立的数据绑定。
所以这便解决了我们的问题尤其可见遇见问题不可怕有思考有想法才是最重要的。剩下的一步一脚印
