volunteer-pc/src/views/volunteer/components/invite.vue

<template>
  <div>
    <div class="tables">
      <el-table
        :data="tableData"
        :border="false"
        :height="505"
        v-loading="loading"
        tooltip-effect="light"
        :cell-style="cellStyle"
      >
        
      <!--:row-class-name="tableRowClassName"  -->
        <el-table-column
          label="序号"
          type="index"
          header-align="center"
          width="70">
        </el-table-column>
        <el-table-column
          prop="content"
          label="参与活动"
          width="280"
        >
          <template slot-scope="scope">
            <div class="activity">
              <div>{{ scope.row.content.split(' ')[0] }}</div>
              <div>{{ scope.row.content.split(' ')[1] }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="person"
          label="参与人员"
          show-overflow-tooltip
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="duration"
          label="状态"
        >
        </el-table-column>
        <el-table-column
          prop="time"
          label="兑换时间"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="250"
        >
          <template slot-scope="scope">
            <div class="tabs-btns">
              <div class="look" @click="look(scope.row)">
                <img src="@/assets/images/look.png" alt="">
                <span>查看</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <my-pagination :total="total" @pagesChange="pagesChange"></my-pagination>
    </div>
  </div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue"
export default {
  components:{myPagination},
  data() {
    return {
      tableData: [
        {
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'11',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },{
          content:'志愿活动协助指挥交通 我参加的志愿者活动，指挥交通',
          person:'吴加好',
          duration:'10',
          time:'2023-08-14'
        },
      ],
      pages:{
        pageSize:10,
        pageNum:1
      },
      total:0,
      loading:false,
    }
  },
  props:{
    value:{
      type:String,
      default:''
    }
  },
  watch:{
    value:{
      handler(newInput,oldInput) {
        // 搜索值
      },
    }
  },
  methods:{
    // 页码，当前页切换事件
    pagesChange(pages){
      // console.log(pages)
      this.getList(pages)
    },
    // tabs不同行给不同class
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
    // 单元格的 style 的回调方法
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return `text-align:center`;
      } else {
        return '';
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.tables {
  ::v-deep .el-table {
    .success-row {
      background-color: rgba(250, 247, 247, 0.5);
    }
    .activity {
      div {
        text-align: left;
        line-height: 20px;
        &:nth-child(1) {
          font-size: 14px;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 400;
          color: #4D4949;
        }
        &:nth-child(2) {
          width: 180px;
          font-size: 14px;
          font-family: 'Alibaba PuHuiTi';
          font-weight: 400;
          color: #999191;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    td {
      height: 42px;
      box-sizing: border-box;
      // text-align: center;
      font-size: 14px;
      font-family: 'Alibaba PuHuiTi';
      font-weight: 400;
      color: #525966;
      padding: 2px 0;
    }
    th {
      height: 45px;
      background-color: #F7F5F5;
      font-size: 15px;
      font-family: 'Alibaba PuHuiTi';
      font-weight: bold;
      color: #4D4949;
      .el-checkbox {
        display: none;
      }
    }
  }
  ::v-deep .el-table::before {
    height: 0;
  }
  .tabs-btns {
    display: flex;
    align-items: center;
    // justify-content: center;
    .look{
      display: flex;
      // align-items: center;
      margin-right: 30px;
      cursor: pointer;
      img {
        width: 20px;
        margin-right: 5px;
      }
      span {
        font-size: 15px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #045FFD;
      }
    }
  }
}
.pagination {
  // margin-top: 10px;
}
</style>