El-Table 表格的表头字段切换

news2024/9/24 0:06:48

最近写了一个小功能，比较有意思，特此博客记录。

提出需求：需要表头字段变化，但是我在官网上的表格相关上查找，没有发现便捷方法。

于是我有两个想法：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-select
                 v-model="selectedZyjszcdj[scope.row.id]"
                          filterable
                          size="small"
                          placeholder="请选择职称等级"
                          clearable
                          class="my-el-select my-el-select-1 gwyzjInput"
                          @focus="zcdjOptionsFocus"
                        >
                          <el-option
                            v-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 为键的属性。