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