效果展示:
点击后的操作页面
第一步控件标签添加
<!-- 操作工具栏 -->
<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标签的内容