1.问题:
之前一直不是太了解下拉框与后台交互的原理
2.解决:
逻辑:获取后台数据 ---> 绑定 label 和 value 和 发送给后端的 "用户所选择的值" ,这里命名为 value.sync
业务场景:
前端代码:
<v-select :placeholder="'请选择书籍分类标签'"
:options="bookTag"
:options-label="'tagTitle'"
:value.sync="searchParam.tagVal"
:options-value="'id' "></v-select>
<script>
import contentService from '../../service/cont';
export default {
data() {
return {
contentList: [],
bookTag: [],
tagTitle: '',
searchParam: {
tagVal: null,
inputVal: ""
},
currentPage: 1, //当前页的页码
total: 0, //总条数
pageSize: 50, //单页的分页数量
maxSize: 10, //能显示页数
tableTitles: [{
name: '书名',
key: 'contentTitle'
}, {
name: '作者',
key: 'authorName'
}, {
name: '出版社',
key: 'publisherName'
}, {
name: '主讲人',
key: 'speaker'
}, {
name: '分类标签',
key: 'tagStr'
}, {
name: '发布日期',
key: 'publishDate'
}, {
name: '操作',
isAction: true,
class: 'text-center',
itemActions: [{
name: 'table-play',
label: '播放'
}]
}],
}
},
beforeDestroy: function () {
PubSub.unsubscribe('table-play');
},
mounted: function () {
contentService.getBookList(this, {
pageSize: this.pageSize,
pageNum: this.currentPage
});
contentService.getBookTag(this);
PubSub.subscribe('table-play', function (msg, args) {
var rowData = args[0];
this.player(rowData.id);
}.bind(this));
},
components: {
tableComponent: function (resolve) {
require(['../../components/table.vue'], resolve);
},
pagination: function (resolve) {
require(['../../components/pagination.vue'], resolve);
},
VSelect: function (resolve) {
require(['../../components/select.vue'], resolve);
},
loading: function (resolve) {
require(['../../components/loading.vue'], resolve);
}
},
methods: {
search: function () {
contentService.getBookList(this, {
pageSize: this.pageSize,
pageNum: this.currentPage,
keywords: this.searchParam.inputVal,
tagId: this.searchParam.tagVal === 'null' ? '' : this.searchParam.tagVal
})
},
reset: function () {
this.searchParam.tagVal = null;
this.searchParam.inputVal = '';
this.currentPage = 1;
contentService.getBookList(this, {
pageSize: this.pageSize,
pageNum: this.currentPage,
keywords: this.searchParam.inputVal,
tagId: this.searchParam.tagVal
})
},
//更换分页页码方法
pageChange: function () {
contentService.getBookList(this, {
pageSize: this.pageSize,
pageNum: this.currentPage,
})
},
player: function (id) {
this.$router.push({
name: 'player',
query: {
id: id,
source: 'bookList'
},
})
}
}
}
</script>