vue + element 表格删除线功能

在Vue + ElementUI 的项目中的表格添加删除线

示例:

image.png

这里因为我我最后一个单元格是按钮不需要删除线, 所以使用了 ElementUI 提供的 :cell-class-name方法, 他接收四个参数 Function({row, column, rowIndex, columnIndex}), 其中column中可以拿到单元格ID, 从而做进一步的判断, 可以控制任何一个单元格

代码如下

<template>
  <div class="comment_container">
      //使用单元格的 className 的回调方法
      <el-table :data="comments" :cell-class-name="delLine">
        <el-table-column label="标题" prop="title" width="400px"></el-table-column>
        <el-table-column label="总评论数" prop="total_comment_count" width="240px"></el-table-column>
        <el-table-column label="粉丝评论数" prop="fans_comment_count" width="240px"> </el-table-column>
        <el-table-column label="状态" width="260px"> </el-table-column>
        <el-table-column label="操作" prop width="100px">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.comment_status"
              type="success"
              size="small"
              @click="changeComStatus(scope.row)"
            >打开评论</el-button>
            <el-button v-else type="danger" size="small" @click="changeComStatus(scope.row)">关闭评论</el-button>
          </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  methods: {
    // 删除线
    delLine ({ row, column, rowIndex, columnIndex }) {
      if (!row.comment_status && column.id !== 'el-table_1_column_5')  return 'del_line'
    }

  }
}
</script>

如果整个tr都需要删除线, 可以使用:row-class-name

  methods: {
    // 删除线
    delLine ({ row, rowIndex,}) {
      if (!row.comment_status)  return 'del_line'
    }

根目录 style下 index.less

// 删除线
.del_line::after {
    content: no-open-quote;
    position: absolute;
    top: 51%;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #000;
}