ChangPapelTable.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-12-19 15:23:58
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-02-01 17:24:30
 * @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson-table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-table
      v-loading="loading"
      :data="nameList"
      height="305"
      @select="select"
      @select-all="all"
      ref="multipleTable"
    >
      <el-table-column
        v-if='!disabled'
        type="selection"
      ></el-table-column>
      <el-table-column label="姓名" align="center" prop="staffName">
      </el-table-column>
      <el-table-column
        label="所属部门"
        align="center"
        prop="deptName"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column
        label="岗位"
        align="center"
        prop="profession"
        :formatter="formatter"
      >
      </el-table-column>
    </el-table>
    <!-- <div> -->
    <el-pagination
      :layout="'prev, pager, next'"
      v-show="total > 0"
      :total="total"
      :current-page="queryParams.pageNum"
      :page-sizes="[queryParams.pageSize]"
      @current-change="currentChangeClick"
    />
    <!-- </div> -->
  </div>
</template>

<script>
import { listStaff } from "@/api/safetyManagement/staff";
export default {
  name: "",
  props: {
    selectNameList: {
      type: Array,
    },
    disabled: {
      type: Boolean,
    },
  },
  created() {
    // this.listStaff();
  },

  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deptId: null,
        staffName: null,
      },
      total: 0,
      nameList: [],
      loading: false,
    };
  },
  mounted() {
  
  },
  methods: {
    listStaff() {
      this.loading = true;
      listStaff(this.queryParams).then((res) => {
        this.total = res.total;
        this.nameList = res.rows;
        this.$nextTick((item) => {
          this.selectNameList.forEach((item) => {
            this.toggleSelection(item.staffId, true);
          });
          this.loading = false;
        });
      });
    },
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    select(all, row) {
      this.$emit("selectOne", all, row);
    },
    all(all) {
      console.log(all);
      // true是全选，false是全清
      let allSelect = false;
      if (all.length == 0 || (all.length == 1 && [0] == undefined)) {
        allSelect = false;
      } else if (all.length > 1) {
        allSelect = true;
      }
      this.$emit("selectAll", this.nameList, allSelect);
    },
    selectable(row, rowIndex) {
      if (!this.disabled) {
        return true;
      }
    },
    // 切换选项
    toggleSelection(staffId, SeclctFlag = false) {
      const item = this.nameList.find((item) => {
        return item.staffId == staffId;
      });
      this.$refs.multipleTable.toggleRowSelection(item, SeclctFlag);
    },

    currentChangeClick(val) {
      this.queryParams.pageNum = val;
      this.listStaff();
    },
    formatter(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index);
      if (!cellValue) return "-";
      else return cellValue;
    },
  },
};
</script>
<style lang="scss" scoped>
</style>