使用若依框架element-table样式以及插槽使用

element-plus，Table组件完成以下表格

 

 

 外层使用el-table组件 v-loading=loading（在script中定义const loading = ref(true)）

使用el-table包裹el-table-column（每一列）

一：第一列名称中显示tag标签需要在el-table-column中定义插槽，column上的 lable=显示的名称 align=“对齐方式（我这边是居中）” prop=字段名“”

需要使用到el-tag标签，以及template插槽，其中v-if=“scope.row.expired”是通过是否有这个参数判断此tag的显示以及隐藏

 二：实现表格中文字的变化，根据传的状态值更改不同的颜色（我这边用的三元运算符，如果改变的东西多可以在script中使用switch方法）

需要使用tamplate插槽，如果状态是0显示灰色，如果状态是1显示黑色，如果状态是2显示橘色，如果是3显示绿色，否则显示为""

 三：第三列为正常的el-table-column，在里面写lable和prop即可

四：这边返回的为 年-月-日，时-分-秒。但是只取年月日

需要使用tamplate插槽，parseTime为内置方法，这边我只需要年月日所以是“YYYY-MM-DD”如果需要时分秒的话加上HH:mm:ss

我这边的v-if和else是判断如果有这个日期字段，我的页面显示返回来的字段，否则页面显示--（根据项目需求进行判断即可）可以使用Table中的：fomat

         加上HH：mm：ss

        

        页面效果

使用formatter的方法：

 在el-table-column中加入：  :formatter="formatter

 五：第五列为正常的el-table-column，在里面写lable和prop即可