效果图：

点击
image.png
显示
image.png

前端代码

  1. <el-table v-loading="loading" :data="clientList" @selection-change="handleSelectionChange"
  2.               :default-sort="{prop: 'createTime', order: 'descending'}">
  3.       <el-table-column type="selection" width="55" align="center" show-overflow-tooltip/>
  4.       <el-table-column :label="columns[0].label" align="center" prop="id" v-if="columns[0].visible" show-overflow-tooltip/>
  5.       <el-table-column :label="columns[1].label" align="center" prop="clientName" v-if="columns[1].visible" show-overflow-tooltip/>
  6.       <el-table-column :label="columns[2].label" align="center" prop="clientAge"v-if="columns[2].visible" show-overflow-tooltip/>
  7.       <el-table-column :label="columns[3].label" align="center" prop="clientSex" v-if="columns[3].visible"show-overflow-tooltip>
  8.         <template slot-scope="scope">
  9.           <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.clientSex"/>
  10.         </template>
  11.       </el-table-column>
  12.       <el-table-column :label="columns[4].label" align="center" prop="clientPhone" v-if="columns[4].visible" show-overflow-tooltip/>
  13.       <el-table-column :label="columns[5].label" align="center" prop="clientHeadPortrait" v-if="columns[5].visible" show-overflow-tooltip>
  14.         <template slot-scope="scope">
  15.           <image-preview :src="scope.row.clientHeadPortrait" :width="50" :height="50"></image-preview>
  16.         </template>
  17.       </el-table-column>
  18.       <el-table-column :label="columns[6].label" align="center" prop="createTime" v-if="columns[6].visible" sortable show-overflow-tooltip>
  19.         <template slot-scope="scope">
  20.           <span>{{ parseTime(scope.row.createTime) }}</span>
  21.         </template>
  22.       </el-table-column>
  23.       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
  24.         <template slot-scope="scope">
  25.           <el-button
  26.             size="mini"
  27.             type="text"
  28.             icon="el-icon-edit"
  29.             @click="handleUpdate(scope.row)"
  30.             v-hasPermi="['personnel:client:edit']"
  31.           >修改
  32.           </el-button>
  33.           <el-button
  34.             size="mini"
  35.             type="text"
  36.             icon="el-icon-delete"
  37.             @click="handleDelete(scope.row)"
  38.             v-hasPermi="['personnel:client:remove']"
  39.           >删除
  40.           </el-button>
  41.         </template>
  42.       </el-table-column>
  43.     </el-table>

js 的 data 中

  1.  // 列信息
  2. columns: [
  3.   {key: 0, label: `编号`, visible: true},
  4.   {key: 1, label: `姓名`, visible: true},
  5.   {key: 2, label: `年龄`, visible: true},
  6.   {key: 3, label: `性别`, visible: true},
  7.   {key: 4, label: `手机号`, visible: true},
  8.   {key: 5, label: `头像`, visible: false},
  9.   {key: 6, label: `创建时间`, visible: true},
  10. ],