TEAMModelOS/TEAMModelOS/ClientApp/src/view/coursemgt/components/MemberTable.vue

<template>
  <div class="member-table-container">
    <Table :columns="columns" :data="data" height="750" :loading="tableLoading">
      <template slot-scope="{ row, index }" slot="header">
        <PersonalPhoto :name="row.name" :picture="row.picture"></PersonalPhoto>
      </template>
    </Table>
  </div>
</template>
<script>
import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
export default {
  props: ["members"],
  components:{
    PersonalPhoto
  },
  data() {
    return {
      tableLoading:false,
      columns: [
        {
          slot: "header",
          title: " ",
          align: "center",
          width: 120,
        },
        {
          key: "name",
          title: this.$t("stuAccount.stuName"),
          align: "center",
        },
        {
          key: "id",
          title: this.$t("stuAccount.account"),
          align: "center",
          sortable: true,
          sortMethod: (a, b, type) => {
            if (type == "asc") {
              return a.localeCompare(b);
            } else {
              return b.localeCompare(a);
            }
          },
        },
        {
          key: "no",
          title: this.$t("stuAccount.seatNo"),
          align: "center",
          width: 120,
          sortable: true,
          sortMethod: (a, b, type) => {
            if (type == "desc") {
              return parseInt(a) > parseInt(b) ? -1 : 1;
            } else {
              return parseInt(a) < parseInt(b) ? -1 : 1;
            }
          },
        },
        {
          key: "irs",
          title: this.$t('courseManage.classroom.studentTableC9'),
          align: "center",
          width: 120,
        },
        
        
      ],
      data: [],
    };
  },
  created() {
    console.log(this.members);
    this.data = this.members;
  },
  watch: {
    members: {
      immediate:true,
      handler(n, o) {
        this.data = this.members
      },
    },
  },
};
</script>