fair-web/views/problem_table.ejs

<% include util %>
<script>
  Vue.component('problem-table', {
    template: '#problemTable',
    props: ['disabledidarray', 'userselectarray'],// 禁止选择的选项， 用户已经选择的选项
    data() {
      return {
        allproblemList:[],
        checkedArray: [],
        datas: [],
        currentPage:1,
        max: 0,
        arrayItem: null
      }
    },
    watch: {
      allproblemList: function(newData, olbData){
        this.datas = newData.slice(0,10);
      },
      userselectarray: function(newData, olbData) {
        console.log('更新了');
        // this.checkedArray = newData;
        this.toggleSelection(newData)
      },
      checkedArray: function(newdata, olddata){
        console.log('checked更新了');
        this.toggleSelection(newdata)
      }
    },
    mounted(){
      console.log('加载');
      console.log(this.userselectarray);
      this.getCount();
    },
    methods:{
      getCount: function(){
        let that = this;
        $.ajax({
          url: '/api/pagination/allproblem',
          type: 'GET',
          success: function (data) {
            that.max = parseInt(data.problemInfo.length);
            that.allproblemList = data.problemInfo;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert('创建失败');
          }
        })
      },
      handleClose(tag) {
        const deleteItem = this.checkedArray.splice(this.checkedArray.indexOf(tag), 1);
        this.toggleSelection(deleteItem)
      },
      getProblemPagination(page) {
        let that = this;
        this.datas = this.allproblemList.slice((page - 1)*10, (page - 1)*10+10);
        this.$nextTick(function(){
          that.toggleSelection(that.checkedArray);
        })
      },
      selectProblem: function(array) {
        this.toggleSelection(array)
      },
      toggleSelection(rows) {
        if (rows) {
          console.log(rows);
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handlePageChange(page){
        this.selectProblem(this.checkedArray);
        this.getProblemPagination(page);
      },
      handleSelectionChange(val, row){
        const multipleSelectionId = this.checkedArray.map(item => item.id);
        if (multipleSelectionId.includes(row.id)) {
          this.checkedArray.splice(this.checkedArray.indexOf(row), 1)
        } else {
          this.checkedArray.push(row);
        }
        // this.$emit('getuserchoose', this.checkedArray)
      },
      disableCheckbox: function(row) {
        if (this.disabledidarray) {
          return !this.disabledidarray.includes(row.id);
        }
        return true;
      },
    },
  });
</script>

<script id="problemTable" type="text/x-template">
    <div>
        <div class="field">
            <label>当前练习阶段已经选择的题</label>
            <el-table
                    ref="multipleTable"
                    :data="datas"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @select="handleSelectionChange"
            >
                <el-table-column
                        type="selection"
                        :selectable="disableCheckbox"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="题目id">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="题目标题">
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handlePageChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="max">
            </el-pagination>
        </div>
    </div>
</script>