vue 自定义动态表格table列控件功能和解决出现的问题

效果展示：

点击后的操作页面

第一步控件标签添加

<!-- 操作工具栏 -->
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['jstb:activation-code:create']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport"
                   v-hasPermi="['jstb:activation-code:import']">导入</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" :loading="exportLoading"
                   v-hasPermi="['jstb:activation-code:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

第二步添加table属性

<!-- 列表 -->
    <el-table v-loading="loading" :data="list" height="calc(71.5vh - 180px )" style="width: 100%">

      <!-- <el-table-column label="主键" align="center" prop="id" /> -->
      <el-table-column label="序号" align="center" width="65" key="id" prop="id" v-if="columns[0].visible">
              <template slot-scope="scope">
                <span>{{ (queryParams.pageNo - 1)*queryParams.pageSize+scope.$index+1 }}</span>
              </template>
            </el-table-column>
      <el-table-column label="激活码" align="center" prop="activationCode" key="activationCode" v-if="columns[1].visible"/>
      <el-table-column label="点卡密钥" align="center" prop="cardKey" key="cardKey" v-if="columns[2].visible"/>
      <el-table-column label="激活码路数" align="center" prop="activationType" key="activationType" v-if="columns[3].visible">
      <template slot-scope="scope">
          <span>{{ scope.row.activationType}}路</span>
        </template>
      </el-table-column>
      <el-table-column label="使用状态" align="center" prop="activationUse" key="activationUse" v-if="columns[4].visible">
        <template slot-scope="scope">
          <span>{{ scope.row.activationUse==1?'已使用':'未使用'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="到期时间" align="center" prop="endDate" width="180" key="endDate" v-if="columns[5].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endDate) }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="使用地区" align="center" prop="city" />
      <el-table-column label="发放时间" align="center" prop="sendDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sendDate) }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                     v-hasPermi="['jstb:activation-code:update']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                     v-hasPermi="['jstb:activation-code:delete']">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

第三步js中添加对应的table标题控制队列

源码：

columns: [
        { key: 0, label: `序号`, visible: true },
        { key: 1, label: `激活码`, visible: true },
        { key: 2, label: `点卡密钥`, visible: true },
        { key: 3, label: `激活码路数`, visible: true },
        { key: 4, label: `使用状态`, visible: true },
        { key: 5, label: `到期时间`, visible: true },
      ],

出现问题：table列表数据显示不全

第一步：

第二步：

第三步：
table标签添加 :height=“maxHeight” 这个属性

<!-- 列表 -->
    <el-table v-loading="loading" id="el-table" :data="list" height="calc(71.5vh - 180px )" style="width: 100%" :height="maxHeight">
    </el-table>

再次出现问题：
操作动态队列造成数据table列表跳动

解决方法：
这里给当前页面table起了一个id名字 所以是 #el-table 如果是.el-table 则控制全局的el-table标签的内容