Gogs
9 changed files with 340 additions and 43 deletions
@ -0,0 +1,130 @@
|
||||
<% 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> |
||||
Loading…
Reference in new issue