Vue:v-for，v-if， key，HBuilder和VScode實現(xiàn)用按鈕來分類篩選表格內(nèi)容【詩書畫唱】
目錄：
例子1：HBuilder中用v-for等等拼接出一個表格（該表有排名，姓名，語文，數(shù)學(xué)，英語列等等）
例子2：?在Hbuilder中拼接出科目表格（該表有排名，姓名，語文，數(shù)學(xué)，英語列等等），并且可以進(jìn)行分類篩選：創(chuàng)建語文，數(shù)學(xué)，英語3個按鈕和2個填寫分?jǐn)?shù)范圍type="number"的input框。點(diǎn)擊其中一個科目按鈕（點(diǎn)擊后該按鈕會變橘色），在輸入分?jǐn)?shù)后，就只顯示在被點(diǎn)擊按鈕的科目的分?jǐn)?shù)的范圍之內(nèi)的學(xué)生的列的內(nèi)容。
例子3:在Vscode中實現(xiàn)例子1
在Vscode中要在score前聲明let（不然在Vscode中會報XXX未定義之類的錯誤，個人認(rèn)為Vscode中的語法會比在HBuilder中更嚴(yán)格，當(dāng)然我相比下，更喜歡Vscode，因為界面好看，提示也多，一些好的插件功能強(qiáng)大，有時又自動修復(fù)bug功能，而且更方便下載。當(dāng)然我也很喜歡HBuilder）
Vscode中，在使用了v-for="(score,i)?in?scores"后就必須寫?v-bind:key="i"，不然會報錯
Avoid using non-primitive value as key, use string/number value instead.
Vscode編輯器中使用v-for的報錯解決方法
Elements in iteration expect to have 'v-bind:key' directives
Table1.vue
index.js
例子4：在Vscode中實現(xiàn)例子2
Vscode中v-for和v-if不可以放一起，那么本來的<tr v-for="(score,i) in scores" v-bind:key="i" v-if="score.math>=min && score.math<=max ||(!min||!max)">就被我改寫成<tbody?v-for="(score,i)?in?scores"??v-bind:key="i"><tr?v-if="score.math>=min?&&?score.math<=max?||(!min||!max)">
?<tbody > 套<tbody>時，<th>和<td>的寬度不同時，用CSS樣式統(tǒng)一<th/>和</td>的寬度
Table2.vue
index.js
科普（推薦好文）：
https://www.cnblogs.com/liyanyan665/p/11192635.html
Vue - ElementUI中循環(huán)渲染表格，控制字段的顯示與隱藏 v-if與v-for同時使用
https://mp.weixin.qq.com/s?src=11×tamp=1621139141&ver=3071&signature=apMJgWY*vlL32v18XPBSkkT5s3Nip3huntQKliosDoSE5L6N*HlYXZgSHaQAoH6311YlNJfolCOSYBtdP2Hd0IgT9NybtY0hU0oS6KW1bsOGSgxCtK1kiscMV-2P0D6d&new=1
https://zhuanlan.zhihu.com/p/141238031
https://blog.csdn.net/weixin_44583625/article/details/93162611
例子1：HBuilder中用v-for等等拼接出一個表格（該表有排名，姓名，語文，數(shù)學(xué)，英語列等等）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
? ? <table border="1" style="margin: auto" rules="all">
? ? ? ? <tr>
? ? ? ? ? ? <th>排名</th>
? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? <th>數(shù)學(xué)</th>
? ? ? ? ? ? <th>語文</th>
? ? ? ? ? ? <th>英語</th>
? ? ? ? ? ? <th>總分</th>
? ? ? ? </tr>
? ? ? ? <!-- 1題答案 -->
? ? ? ? <tr v-for="(score,i) in scores">
? ? ? ? ? ? <td>{{i+1}}</td>
? ? ? ? ? ? <td v-for="v in score">{{v}}</td>
? ? ? ? </tr>
? ? ? ? <!-- 2題答案 -->
? ? ? ? <!--<tr v-for="(score,i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60">??
? ? ? ? ? ? <td>{{i+1}}</td>
? ? ? ? ? ? <td v-for="v in score">{{v}}</td>
? ? ? ? </tr>-->
? ? </table>
</div>
</body>
<script srcc="js/vue.js"></script>
<script>
? ? let scores = [
? ? ? ? {name: 'Bob', math: 97, chinese: 89, english: 67},
? ? ? ? {name: 'Tom', math: 67, chinese: 52, english: 98},
? ? ? ? {name: 'Jerry', math: 72, chinese: 87, english: 89},
? ? ? ? {name: 'Ben', math: 92, chinese: 87, english: 59},
? ? ? ? {name: 'Chan', math: 47, chinese: 85, english: 92},
? ? ];
? ? //這里需要注意一點(diǎn)：for in遍歷的是取值關(guān)鍵字而for of遍歷的是值
? ? //添加總分
? ? for (score of scores) {
? ? ? ? score.total = score.math + score.chinese + score.english
? ? }
? ? //按照總分排序
? ? //這里使用的是冒泡算法
? ? for (let i = 0; i < scores.length - 1; i++) {
? ? ? ? for (let j = 0; j < scores.length - 1 - i; j++) {
? ? ? ? ? ? if (scores[j].total < scores[j + 1].total) {
? ? ? ? ? ? ? ? let temp = scores[j];
? ? ? ? ? ? ? ? scores[j] = scores[j + 1];
? ? ? ? ? ? ? ? scores[j + 1] = temp
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? console.log(scores);
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? //屬性名與值為變量名的變量名相同的時候，可以簡寫省略值
? ? ? ? ? ? scores,
? ? ? ? }
? ? })
</script>
</html>
例子2： 在Hbuilder中拼接出科目表格（該表有排名，姓名，語文，數(shù)學(xué)，英語列等等），并且可以進(jìn)行分類篩選：創(chuàng)建語文，數(shù)學(xué)，英語3個按鈕和2個填寫分?jǐn)?shù)范圍type="number"的input框。點(diǎn)擊其中一個科目按鈕（點(diǎn)擊后該按鈕會變橘色），在輸入分?jǐn)?shù)后，就只顯示在被點(diǎn)擊按鈕的科目的分?jǐn)?shù)的范圍之內(nèi)的學(xué)生的列的內(nèi)容。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
? ? ? ? .active{
? ? ? ? ? ? background-color: chocolate;
? ? ? ? }
? ? </style>
</head>
<body>
<!-- 采用相同的數(shù)據(jù)，添加篩選條件：
? ? ? ? ? ? ?1、有三個按鈕：數(shù)學(xué)，語文、外語，點(diǎn)擊誰高亮，
? ? ? ? ? ? ?2、兩個輸入框，【】~【】，前面小的分?jǐn)?shù)，后面大分?jǐn)?shù)，全部設(shè)置完畢，按照要求篩選出對應(yīng)的信息 -->
<div id="app">
? ? <div style="width: 400px;margin: 20px auto;">
? ? ? ? <button @click="subject='math'" :class="{active: subject==='math'}">數(shù)學(xué)</button>
? ? ? ? <button @click="subject='chinese'" :class="{active: subject==='chinese'}">語文</button>
? ? ? ? <button @click="subject='english'" :class="{active: subject==='english'}">英語</button>
? ? ? ? <input type="number" min="0" max="100" v-model="min">
? ? ? ? ~
? ? ? ? <input type="number" min="0" max="100" v-model="max">
? ? </div>
? ? <table border="1" style="margin: auto" rules="all">
? ? ? ? <tr>
? ? ? ? ? ? <th>排名</th>
? ? ? ? ? ? <th>姓名</th>
? ? ? ? ? ? <th>數(shù)學(xué)</th>
? ? ? ? ? ? <th>語文</th>
? ? ? ? ? ? <th>英語</th>
? ? ? ? ? ? <th>總分</th>
? ? ? ? </tr>
? ? ? ? <tbody v-if="subject==='math'">
? ? ? ? <tr v-for="(score,i) in scores" v-if="score.math>=min && score.math<=max ||(!min||!max)">
? ? ? ? ? ? <td>{{i+1}}</td>
? ? ? ? ? ? <td v-for="v in score">{{v}}</td>
? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? ? <tbody v-else-if="subject==='chinese'">
? ? ? ? ? ? <tr v-for="(score,i) in scores" v-if="score.chinese>=min && score.chinese<=max ||(!min||!max)">
? ? ? ? ? ? ? ? <td>{{i+1}}</td>
? ? ? ? ? ? ? ? <td v-for="v in score">{{v}}</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? ? <tbody v-else-if="subject==='english'">
? ? ? ? ? ? <tr v-for="(score,i) in scores" v-if="score.english>=min && score.english<=max ||(!min||!max)">
? ? ? ? ? ? ? ? <td>{{i+1}}</td>
? ? ? ? ? ? ? ? <td v-for="v in score">{{v}}</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? ? ? <tbody v-else=>
? ? ? ? ? ? <tr v-for="(score,i) in scores">
? ? ? ? ? ? ? ? <td>{{i+1}}</td>
? ? ? ? ? ? ? ? <td v-for="v in score">{{v}}</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? </table>
</div>
</body>
<script srcc="js/vue.js"></script>
<script>
? ? let scores = [
? ? ? ? {name: 'Bob', math: 97, chinese: 89, english: 67},
? ? ? ? {name: 'Tom', math: 67, chinese: 52, english: 98},
? ? ? ? {name: 'Jerry', math: 72, chinese: 87, english: 89},
? ? ? ? {name: 'Ben', math: 92, chinese: 87, english: 59},
? ? ? ? {name: 'Chan', math: 47, chinese: 85, english: 92},
? ? ];
? ? //這里需要注意一點(diǎn)：for in遍歷的是取值關(guān)鍵字而for of遍歷的是值
? ? //添加總分
? ? for (score of scores) {
? ? ? ? score.total = score.math + score.chinese + score.english
? ? }
? ? //按照總分排序
? ? //這里使用的是冒泡算法
? ? for (let i = 0; i < scores.length - 1; i++) {
? ? ? ? for (let j = 0; j < scores.length - 1 - i; j++) {
? ? ? ? ? ? if (scores[j].total < scores[j + 1].total) {
? ? ? ? ? ? ? ? let temp = scores[j];
? ? ? ? ? ? ? ? scores[j] = scores[j + 1];
? ? ? ? ? ? ? ? scores[j + 1] = temp
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? console.log(scores);
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? //屬性名與值為變量名的變量名相同的時候，可以簡寫省略值
? ? ? ? ? ? scores,
? ? ? ? ? ? min:'',
? ? ? ? ? ? max:'',
? ? ? ? ? ? subject:'',
? ? ? ? }
? ? })
</script>
</html>
例子3:在Vscode中實現(xiàn)例子1
在Vscode中要在score前聲明let（不然在Vscode中會報XXX未定義之類的錯誤，個人認(rèn)為Vscode中的語法會比在HBuilder中更嚴(yán)格，當(dāng)然我相比下，更喜歡Vscode，因為界面好看，提示也多，一些好的插件功能強(qiáng)大，有時又自動修復(fù)bug功能，而且更方便下載。當(dāng)然我也很喜歡HBuilder）
Vscode中，在使用了v-for="(score,i)?in?scores"后就必須寫?v-bind:key="i"，不然會報錯
Avoid using non-primitive value as key, use string/number value instead.
Vscode編輯器中使用v-for的報錯解決方法
Elements in iteration expect to have 'v-bind:key' directives
個人傾向于用方法1
Table1.vue
<template>
???<div?id="app">
????????????<table?border="1"?style="margin:?auto"?rules="all">
????????????????<tr>
????????????????????<th>排名</th>
????????????????????<th>姓名</th>
????????????????????<th>數(shù)學(xué)</th>
????????????????????<th>語文</th>
????????????????????<th>英語</th>
????????????????????<th>總分</th>
????????????????</tr>
????????????????<!--?1題答案?-->
????????????????<tr?v-for="(score,i)?in?scores"?v-bind:key="i"?>
????????????????????<td>{{i+1}}</td>
????????????????????<td?v-for="v?in?score"?v-bind:key="v">{{v}}</td>
????????????????</tr>
????????????????<!--?2題答案?-->
?<!--<tr?v-for="(score,i)?in?scores"?v-if="score.math>=60&&score.chinese>=60&&score.english>=60">??
????????????????????<td>{{i+1}}</td>
????????????????????<td?v-for="v?in?score">{{v}}</td>
????????????????</tr>-->
????????????</table>
????????</div>
</template>
<script>
???let?scores?=?[
????????????{name:?'Bob',?math:?97,?chinese:?89,?english:?67},
????????????{name:?'Tom',?math:?67,?chinese:?52,?english:?98},
????????????{name:?'Jerry',?math:?72,?chinese:?87,?english:?89},
????????????{name:?'Ben',?math:?92,?chinese:?87,?english:?59},
????????????{name:?'Chan',?math:?47,?chinese:?85,?english:?92},
????????];
????????//這里需要注意一點(diǎn)：for?in遍歷的是取值關(guān)鍵字而for?of遍歷的是值
????????//添加總分(在Vscode中要在score前聲明let)
????????for?(let?score?of?scores)?{
????????????score.total?=?score.math?+?score.chinese?+?score.english
????????}
????????//按照總分排序
????????//這里使用的是冒泡算法
????????for?(let?i?=?0;?i?<?scores.length?-?1;?i++)?{
????????????for?(let?j?=?0;?j?<?scores.length?-?1?-?i;?j++)?{
????????????????if?(scores[j].total?<?scores[j?+?1].total)?{
????????????????????let?temp?=?scores[j];
????????????????????scores[j]?=?scores[j?+?1];
????????????????????scores[j?+?1]?=?temp
????????????????}
????????????}
????????}
????????console.log(scores);
export?default?{
????/*定義username和password等變量的部分??START（不寫就會報
????Property?or?method?"username"?is?not?defined
????之類變量未定義的錯誤）*/
??data()?{
????return?{
????scores,
????};
??},
??/*定義username和password等變量的部分??END*/
//???methods:?{
//?????f:?function?()?{
//???????console.log(this.username);
//???????console.log(this.password);
//???????console.log(this.username?==?"詩書畫唱");
//???????console.log(this.password?==?"666666");
//???????if?(this.username?==?"詩書畫唱"?&&?this.password?==?"666666")?{
//?????????this.$router.push({
//???????????name:?"My_login_success",
//???????????params:?{
//?????????????act:?this.username,
//?????????????pwd:?this.password,
//?????????????state:?"登錄成功！",
//???????????},
//?????????});
//???????}?else?if?(this.username?!=?"詩書畫唱"?||?this.password?!=?"666666")?{
//?????????alert("登錄失敗，請輸入正確的用戶名和密碼！");
//?????????//?????????this.$router.push({
//?????????//???????????name:?"My_login",
//?????????//???????????params:?{
//?????????//??state:?"登錄失敗，請輸入正確的用戶名和密碼！"
//?????????//???????????},
//?????????//?????????});
//???????}
//?????},
//???},
}
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
//自己加入的必須加載和要使用組件的代碼?START
import?Table1?from?'@/components/Table1'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
???
??????//http://localhost:8080/#/Table1
????{
??????path:?'/Table1',
??????name:?'Table1',//路由跳轉(zhuǎn)時使用
??????component:?Table1//記得寫加載要使用的這個組件的代碼
????}
????,
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時報錯的代碼?END
例子4：在Vscode中實現(xiàn)例子2
個人的解決思路（這個思路是經(jīng)過我的思路修改后，去除嘗試時錯誤等等的思路，自己總結(jié)出來的，可以用于很多的領(lǐng)域）：
在可行的例子中修改成符合要求的可行例子（先在HBuilder中修改成符合要求的例子，后面轉(zhuǎn)移到Vscode中實現(xiàn)。我在Vscode中實現(xiàn)的例子3的基礎(chǔ)上，對照HBuilder中的“作業(yè)二.html”文件，一條一條地加上例子3相比“作業(yè)二.html”沒有的代碼。一部分，一部分地加代碼，分別運(yùn)行，每當(dāng)新加的代碼讓例子3出錯，那么可以鎖定錯在新加的代碼，后面百度錯誤，解決，猜想等等。進(jìn)行分層注釋后更容易理解例子，發(fā)現(xiàn)錯誤，修改錯誤成功等等）
Vscode中v-for和v-if不可以放一起，那么本來的<tr v-for="(score,i) in scores" v-bind:key="i" v-if="score.math>=min && score.math<=max ||(!min||!max)">就被我改寫成<tbody?v-for="(score,i)?in?scores"??v-bind:key="i"><tr?v-if="score.math>=min?&&?score.math<=max?||(!min||!max)">
Table2.vue
<style>
????????????.active{
????????????????background-color:?chocolate;
????????????}
????????????th{
????????????????width:?100px;
????????????}
????????????td{
width:?100px;
????????????}
????????</style>
<template>
??<div?id="app">
<!--?篩選部分?START?-->
????????<div?style="width:?400px;margin:?20px?auto;">
<button?@click="subject='math'"?:class="{active:?subject==='math'}">數(shù)學(xué)</button>
<button?@click="subject='chinese'"?:class="{active:?subject==='chinese'}">語文</button>
<button?@click="subject='english'"?:class="{active:?subject==='english'}">英語</button>
<input?type="number"?min="0"?max="100"?v-model="min">
<input?type="number"?min="0"?max="100"?v-model="max">???????
????????????</div>
<!--????????篩選部分?END?-->
????????????<table?border="1"?style="margin:?auto"?rules="all">
????????????????????<tbody??>
????????????????????????????<tbody>
????????????????<tr?>
????????????????????<th?>排名</th>
????????????????????<th?>姓名</th>
????????????????????<th?>數(shù)學(xué)</th>
????????????????????<th>語文</th>
????????????????????<th>英語</th>
????????????????????<th>總分</th>
????????????????</tr>
????????????????????</tbody>
????????????????????</tbody>
????????????????<!--?1題答案?-->
<!--?數(shù)學(xué)部分?START?-->
????????????????<!--?<tbody?v-if="subject==='math'">
????????????????<tr?v-for="(score,i)?in?scores"?v-bind:key="i"??>
????????????????????<td??v-if="score.math>=min?&&?score.math<=max?||(!min||!max)">{{i+1}}</td>
????????????????????<td?v-for="v?in?score"?v-bind:key="v">{{v}}</td>
????????????????</tr>
</tbody>?-->
<tbody?v-if="subject==='math'">
????<tbody?v-for="(score,i)?in?scores"??v-bind:key="i">
?<tr?v-if="score.math>=min?&&?score.math<=max?||(!min||!max)">
????????<td??>{{i+1}}</td>
????????<td?v-for="v?in?score"?v-bind:key="v"?>{{v}}</td>
????</tr>
????</tbody>
</tbody>
<!--?數(shù)學(xué)部分?END?-->
<!--?語文部分?START?-->
????????????????<!--?<tbody?v-else-if="subject==='chinese'">
????????????????<tr?v-for="(score,i)?in?scores"?v-bind:key="i"??>
????????????????????<td??v-if="score.chinese>=min?&&?score.chinese<=max?||(!min||!max)">{{i+1}}</td>
????????????????????<td?v-for="v?in?score"?v-bind:key="v">{{v}}</td>
????????????????</tr>
</tbody>?-->
<tbody?v-else-if="subject==='chinese'">
????<tbody??v-for="(score,i)?in?scores"?v-bind:key="i"?>
?<tr?v-if="score.chinese>=min?&&?score.chinese<=max?||(!min||!max)">
????????<td?>{{i+1}}</td>
????????<td?v-for="v?in?score"?v-bind:key="v"?>{{v}}</td>
????</tr>
????</tbody>
</tbody>
<!--?語文部分?END?-->
<!--?英語部分?START?-->
????????????????<!--?<tbody?v-else-if="subject==='english'">
????????????????<tr?v-for="(score,i)?in?scores"?v-bind:key="i"??>
????????????????????<td??v-if="score.english>=min?&&?score.english<=max?||(!min||!max)">{{i+1}}</td>
????????????????????<td?v-for="v?in?score"?v-bind:key="v">{{v}}</td>
????????????????</tr>
</tbody>?-->
????????
<tbody?v-else-if="subject==='english'">
????<tbody?v-for="(score,i)?in?scores"?v-bind:key="i">
??<tr?v-if="score.english>=min?&&?score.english<=max?||(!min||!max)">
????????<td?>{{i+1}}</td>
????????<td?v-for="v?in?score"?v-bind:key="v"?>{{v}}</td>
????</tr>
????</tbody>
</tbody>
<!--?英語部分?END?-->
<!--?什么按鈕都不點(diǎn)?START?-->
????????????<tbody?v-else>
????????????????<tbody>
????<tr?v-for="(score,i)?in?scores"??v-bind:key="i"?>
????????<td?>{{i+1}}</td>
????????<td?v-for="v?in?score"??v-bind:key="v"?>{{v}}</td>
????</tr>
????????????</tbody>
</tbody>
<!--?什么按鈕都不點(diǎn)??END?-->
????????????????<!--?2題答案?-->
?<!--<tr?v-for="(score,i)?in?scores"?v-if="score.math>=60&&score.chinese>=60&&score.english>=60">??
????????????????????<td>{{i+1}}</td>
????????????????????<td?v-for="v?in?score">{{v}}</td>
????????????????</tr>-->
????????????</table>
????????</div>
</template>
<script>
???let?scores?=?[
????????????{name:?'Bob',?math:?97,?chinese:?89,?english:?67},
????????????{name:?'Tom',?math:?67,?chinese:?52,?english:?98},
????????????{name:?'Jerry',?math:?72,?chinese:?87,?english:?89},
????????????{name:?'Ben',?math:?92,?chinese:?87,?english:?59},
????????????{name:?'Chan',?math:?47,?chinese:?85,?english:?92},
????????];
????????//這里需要注意一點(diǎn)：for?in遍歷的是取值關(guān)鍵字而for?of遍歷的是值
????????//添加總分(在Vscode中要在score前聲明let)
????????for?(let?score?of?scores)?{
????????????score.total?=?score.math?+?score.chinese?+?score.english
????????}
????????//按照總分排序
????????//這里使用的是冒泡算法
????????for?(let?i?=?0;?i?<?scores.length?-?1;?i++)?{
????????????for?(let?j?=?0;?j?<?scores.length?-?1?-?i;?j++)?{
????????????????if?(scores[j].total?<?scores[j?+?1].total)?{
????????????????????let?temp?=?scores[j];
????????????????????scores[j]?=?scores[j?+?1];
????????????????????scores[j?+?1]?=?temp
????????????????}
????????????}
????????}
????????console.log(scores);
export?default?{
????/*定義username和password等變量的部分??START（不寫就會報
????Property?or?method?"username"?is?not?defined
????之類變量未定義的錯誤）*/
??data()?{
????return?{
???//屬性名與值為變量名的變量名相同的時候，可以簡寫省略值
????????????????scores,
????????????????min:'',
????????????????max:'',
????????????????subject:''
????};
??},
?
}
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
import?Table2?from?'@/components/Table2'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
??
???//http://localhost:8080/#/Table2
???{
????path:?'/Table2',
????name:?'Table2',//路由跳轉(zhuǎn)時使用
????component:?Table2//記得寫加載要使用的這個組件的代碼
??}
??,
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時報錯的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時報錯的代碼?END
科普（推薦好文）：
https://www.cnblogs.com/liyanyan665/p/11192635.html
Vue - ElementUI中循環(huán)渲染表格，控制字段的顯示與隱藏 v-if與v-for同時使用
在Vue中使用v-for循環(huán)一個數(shù)組/對象時，如果再使用v-if，那么會提示使用計算屬性(能正常使用)，因為Vue中是不提倡v-for與v-if同時使用的。
在我的項目中也遇到了問題
不過翻看文檔解決了
修改前：
<el-table-column
v-for="(item, index) in columns"
:prop="item.prop"?
:key="index"?
align="center"
:width="item.width"
:label="item.label"
v-if="item.show"
>
></el-table-column>
編輯器提示：vue/no-use-v-if-with-v-for] The 'columns' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.eslint-plugin-vue
修改后：
<template v-for="(item, index) in columns">
<el-table-column
:prop="item.prop"?
:key="index"?
align="center"
:width="item.width || '' "
:label="item.label"
v-if="item.show"
>
</el-table-column>
</template>
即使用template標(biāo)簽包裹即可，v-for 寫在template 上，v-if 綁定在需要循環(huán)的元素之上即可
https://mp.weixin.qq.com/s?src=11×tamp=1621139141&ver=3071&signature=apMJgWY*vlL32v18XPBSkkT5s3Nip3huntQKliosDoSE5L6N*HlYXZgSHaQAoH6311YlNJfolCOSYBtdP2Hd0IgT9NybtY0hU0oS6KW1bsOGSgxCtK1kiscMV-2P0D6d&new=1
https://zhuanlan.zhihu.com/p/141238031
https://blog.csdn.net/weixin_44583625/article/details/93162611
