0
点赞
收藏
分享

微信扫一扫

ElementUI(15)n+4【某列超过48小时,修改样式 + 修改el-table表格行的样式】

小磊z 2022-03-25 阅读 77
<!--  🌰 -->
<el-table-column label="时间">
	<template slot-scope="scope">
		<div :style="{cplor:changeTime(scope.row.lastTime)  == 1 ? 'red' : ''  }">
			{{scope.row.lastTime}}
		</div>
	</template>
</el-table-column>
export default{
	data:{
		return{}
	},
	methods:{
		changeTime(time){
			//使用时间戳判断是否超过48小时--->48*60*60*1000 = 172800000
			if (new Date().getTime() - new Date(time).getTime() > 172800000){
                return 1;
            } else {
                return 0;
            }
		}
	}
}

<!--  🌰 -->
<el-form-item label="物品:" label-width="150px">
    <el-table :data="info" style="width: 100%" :header-row-style="headStyle"  :row-style="rowStyle">
        <el-table-column prop="id" label="物品ID" min-width="100"></el-table-column>
        <el-table-column prop="name" label="物品名" min-width="150"></el-table-column> 
     </el-table>
</el-form-item>
methods:{
	headStyle({ row, rowIndex }) {
         let styleJson = {};
         styleJson = {
             color: "#409EFF",
          };
          return styleJson;
    },
    rowStyle({ row, rowIndex }) {
         let styleJson = {};
         styleJson = {
             color: "#67c23a",
             backgroundColor: "#f0f9eb",
          };
          return styleJson;
    },

}
举报

相关推荐

0 条评论