table 应用技巧

1.html 标签--可循环

1.1 使用变量保存行信息

 <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
     <el-table-column type="selection" align="center" v-if="columns[0].visible" min- 
        width="55"/>
     <el-table-column label="看板名称" align="center" prop="name" v-if="columns[2].visible" 
        :show-overflow-tooltip="true" min-width="100"/>
     <el-table-column label="创建时间" align="center" prop="createTime" v- 
        if="columns[6].visible"  :show-overflow-tooltip="true" min-width="100">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
     </el-table-column>
     <el-table-column label="操作" align="center" v-if="columns[8].visible" class- 
        name="small-padding fixed-width" width="180" fixed="right">
         <template v-slot="scope">
            <el-button
              size="mini"
              type="text"
              :icon="IconEnum.EDIT"
              @click="handleUpdate(scope.row)"
              v-hasPermi="[KanbanAuth.EDIT]"
            >编辑</el-button>
            <el-button
              size="mini"
              type="text"
              :icon="IconEnum.DELETE"
              @click="handleDelete(scope.row)"
              v-hasPermi="[KanbanAuth.DELETE]"
            >删除</el-button>
        </template>
     </el-table-column>
</el-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: `URL地址`, visible: true },
       { key: 6, label: `创建时间`, visible: true },
       { key: 7, label: `使用状态`, visible: true },
       { key: 8, label: `操作列`, visible: true }
      ],

2.css

操作固定时，防止刷新时高度变化，只显示一半

.el-table>.el-table__fixed-right {
  height: 100% !important; //设置高优先，以覆盖内联样式 label
}