<div class="search-bar">
<el-input
v-model="searchValue"
size="mini"
placeholder="请输入"
class="input"
clearable
/>
<el-button
size="mini"
type="primary"
@click="search">
搜索
</el-button>
</div>
<div>
<el-table
ref="table"
:data="searchData"
height="441">
<el-table-column
prop="order"
label="序号"
width="50">
</el-table-column>
<el-table-column
prop="hospital"
label="医院"
align="center">
</el-table-column>
<el-table-column
prop="department"
label="科室"
align="center">
</el-table-column>
<el-table-column
prop="vocabulary"
label="词汇"
align="center">
</el-table-column>
<el-table-column
prop="createdTime"
label="创建时间"
align="center">
</el-table-column>
<el-table-column
prop="codeLength"
label="字符长度"
align="center">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<vue-audio
:vocabulary="scope.row.vocabulary"
>
</vue-audio>
</template>
</el-table-column>
</el-table>
</div>
<div class="distinguishFour">
<div class="usage_box">
<span class="total">共 {{ total }} 条</span>
<el-pagination
:current-page.sync="pageNow"
:page-sizes="pageList"
:page-size="pageSize"
layout="sizes, prev, pager, next, jumper"
:total="total"
@current-change="changeData"
>
</el-pagination>
</div>
</div>
export default {
components: {
TitleNav,
VueAudio
},
data() {
return {
list: volcanic,
searchValue: '',
total: 0,
pageNow: 1,
pageList: [50],
pageSize: 50,
pageSizeNew: 50,
searchData: []
};
},
watch: {
pageNow: {
handler: function(newVal) {
if (!this.searchValue) {
let data = JSON.parse(JSON.stringify(this.list.data));
this.searchData = data.splice((newVal - 1) * 50, 50);
this.total = this.list.data.length;
} else {
let resultList = this.list.data.filter(data =>
data.vocabulary.includes(this.searchValue)
);
console.log(resultList);
this.total = resultList.length;
this.searchData = resultList.splice((newVal - 1) * 50, 50);
}
}
}
},
mounted() {
this.search();
},
methods: {
search() {
this.pageNow = 1;
if (!this.searchValue) {
let data = JSON.parse(JSON.stringify(this.list.data));
this.searchData = data.splice(0, 50);
this.total = this.list.data.length;
} else {
let resultList = this.list.data.filter(data =>
data.vocabulary.includes(this.searchValue)
);
console.log(resultList);
this.total = resultList.length;
this.searchData = resultList.splice(0, 50);
}
},
changeData(val) {
console.log('翻页,当前为第几页', val);
this.pageNow = val;
},
}
};