• element-ui table组件,分别设置表头和表格内容的居中,自定义渲染


     1 <el-table :data="tableData"  border class="table" header-cell-class-name="table-header" >
     2     <el-table-column prop="name" label="名称" min-width="260" header-align="center">
     3          <template slot-scope="scope" style="text-align:left;">        //单元格内容需要点击的
     4                <a href="javascript:;" @click="getDeailFn(scope.row.id,scope.row.name)" class="c-green under-line">{{scope.row.name}}</a>
     5          </template>
     6     </el-table-column>
     7     <el-table-column label="类型" header-align="center">
     8         <template slot-scope="scope">
     9              <span> {{typeObj[scope.row.type]}}{{scope.row.type}}</span>
    10         </template>
    11     </el-table-column>
        <el-table-column prop="application" label="组件名称" min-width="200" header-align="center"></el-table-column> //基本展示 13 <el-table-column prop="version" label="漏洞版本" v-if="checkedColumn.indexOf('漏洞版本')>-1" header-align="center"></el-table-column> 14 <el-table-column label="危害等级" v-if="checkedColumn.indexOf('危害等级')>-1" header-align="center"> 15 <template slot-scope="scope"> 16 <span>{{scope.row.level=="0"?"":scope.row.level=="1"?"低危":scope.row.level=="2"?"中危":"高危"}}</span> //内容需要转化处理的 - 简单转化 17 </template> 18 </el-table-column> 19 <el-table-column label="创建时间" prop="create_time" min-width="160" v-if="checkedColumn.indexOf('创建时间')>-1" header-align="center"> 20 <template slot-scope="scope"> 21 <span> {{formatTime(scope.row.create_time)}}</span> //需要借助函数转化的 , 22 </template> 23 </el-table-column> 24 <el-table-column label="更新时间" prop="update_time" min-width="160" v-if="checkedColumn.indexOf('更新时间')>-1" header-align="center"> 25 <template slot-scope="scope"> 26 <span> {{formatTime(scope.row.update_time)}}</span> 27 </template> 28 </el-table-column> 30 <el-table-column label="操作" width="180" v-if="checkedColumn.indexOf('操作')>-1" header-align="center"> 31 <template slot-scope="scope"> 32 <el-button type="text" icon="el-icon-edit" @click="handleFn(scope.$index, scope.row,'edit')">编辑</el-button> 33 </template> 34 </el-table-column> 35 </el-table>

    在methods中定义
    formatTime(time){
        if(time){
          return moment(time).format("YYYY-MM-DD hh:mm:ss");
        }else{
          return "";
        };
    },
    在<el-table-column prop="name" label="名称" min-width="260" header-align="center">  --  只针对表头的进行居中
    在<el-table-column prop="name" label="名称" min-width="260" align="center">  -- 表头和tbody中的内容都进行居中

    都是在column标签上
  • 相关阅读:
    SpringBoot中并发定时任务的实现、动态定时任务的实现(看这一篇就够了)
    压力测试
    AlertManger的详细配置
    http://www.linuxe.cn/post-518.html
    https://helpcdn.aliyun.com/knowledge_detail/194196.html
    AIOPS智能监控团队
    普罗新修斯监控mysql数据库1
    干货 | Elasticsearch集群黄色原因的终极探秘
    elasticsearch集群在生产上面必看的优化文章
    干货丨DolphinDB与Elasticserach在金融数据集上的性能对比测试
  • 原文地址:https://www.cnblogs.com/fyjz/p/13206510.html
Copyright © 2020-2023  润新知