el-table中给行加删除线 个人日常工作小记

css部分

.text-strikethrough {
    text-decoration: line-through;
}

dom部分

<el-table
	 :data="table"
     border
     :stripe="true"
     style="width: 100%"
     :height="infoTableHeight"
     resizable
     :cell-style="{padding:'0'}">
     <el-table-column
         v-for="column in tableColumn"
         :key="column.prop"
         :prop="column.prop"
         :label="column.label"
         :width="column.width"
         :fixed="column.fixed"
         :align="column.align">
         <template v-slot="scope">
             <span :class="shouldShowStrikethrough(scope.row) ? 'text-strikethrough' : ''">
               {{ scope.row[column.prop] }}
             </span>
         </template>
     </el-table-column>
     <template #empty>
         <div class="custom-empty-state" v-if="infoTableList">
             <img src="@/assets/imgs/data-null.png" alt="No Data">
             <p>暂无数据</p>
         </div>
     </template>
 </el-table>

//逻辑部分

methods:{
        shouldShowStrikethrough(row) {
            return row.biz_status.includes('取消') || row.goods_status.includes('取消')
        },
}

效果如下：

个人工作小记，欢迎沟通交流！