vue關鍵代碼：

<template><el-container><el-header>英語單詞墻</el-header><el-container><el-aside width="300px"><el-table :data="tableData" style="width: 100%;cursor:pointer;" @row-click="clickTr"><el-table-column prop="name" label="單詞書(點擊后需等待10秒加載每本書的單詞)" width="300" lazy ></el-table-column></el-table></el-aside><el-main><el-paginationbackground:current-page="page"layout="prev, pager, next, jumper":total="pagetotal":page-size="perpage"@current-change="changepage"></el-pagination><div class="wai"><el-cardclass="box-card" v-for="(item, index) in dclist2" @mouseenter.native="enter(index)" @mouseleave.native="leave(index)" :key="index"><div class="text item en" ref="en" >{{ item.vocabulary }}</div><div class="text item cn" ref="cn" >{{ item.interpretation}}</div></el-card></div></el-main></el-container></el-container> </template> <style>.el-table .warning-row {background: oldlace; }.el-table .success-row {background: #f0f9eb; } .text {font-size: 14px;}.item {padding: 18px 0;} .cn{transform: scale(0);position: absolute;width: 100%;height: 100%;display:flex; justify-content: center; align-items: center; background: #F2F2F2} .en{ transform:scale(1);position: absolute;background:#eeeeee;display:flex;width: 100%;height: 100%; justify-content: center; align-items: center;} .el-card__body {transition:0.3s;height: 100%;width: 100%;padding:0px; position: relative; display:flex; justify-content: center; align-items: center;} .box-card{width: 20%;height: 100px;margin: 10px; } .wai { display: flex; flex-wrap: wrap; width:100%; height:480px;} </style> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> section {height: 100%; } .el-header, .el-footer {background-color: #F2F2F2;color: #333;text-align: center;line-height: 60px; }.el-aside {background-color: #d3dce6;color: #333;text-align: center; } ::-webkit-scrollbar {width: 5px; } ::-webkit-scrollbar-track {background-color: #f5f5f5; } ::-webkit-scrollbar-thumb {background-color: #fff;border-radius: 10px; } ::-webkit-scrollbar-thumb:hover {background-color: rgba(0, 0, 0, 1); } .el-main {background-color: #e9eef3;color: #333;text-align: center; }body > .el-container {margin-bottom: 40px; } </style> <script> import page from "@/components/Pagination"; export default {name: "HelloWorld",data() {return {words: [],tableData: [],page: 1, //當前頁碼perpage:16, //每頁多少條記錄pagetotal: 1, //一共有多少條記錄};},components: {page,},computed: {dclist2() {var that = this;return this.words.filter(function (item, index) {if (index >= (that.page - 1) * that.perpage &&index < (that.page - 1) * that.perpage + that.perpage) {return item;}});},},methods: {changepage(res) {this.page = res;// this.getdata(this.page,this.perpage)}, enter(index){ // alert("hello") console.log(index)// console.log(this.$refs.cn)this.$refs.cn[index].style.transform ="scale(1)"this.$refs.en[index].style.transform ="scale(0)" },leave(index){this.$refs.cn[index].style.transform ="scale(0)"this.$refs.en[index].style.transform ="scale(1)" },clickTr(event){let that = this;//console.log(row["id"]) 跟下面效果一樣console.log(event.fenlei_code)//獲取各行id的值axios({url: "接口",method: "GET",header: {"Content-Type": "application/json;charset-UTF-8",},params: {book:event.fenlei_code}}).then((res) => {console.log(res.data); console.log(that.words)that.words = res.data;console.log(that.words)that.pagetotal = res.data.length; //一共有多少條記錄});}},mounted() {axios({url: "接口",method: "GET",header: {"Content-Type": "application/json;charset-UTF-8",},}).then((res) => {console.log(res.data);this.tableData = res.data;this.pagetotal = res.data.length; //一共有多少條記錄});},}; </script>

?

總結

以上是生活随笔為你收集整理的element-ui做背单词的网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。