二、項目問答
1、怎麼在一行固定的輸入行，輸入添加到表格，并且輸入添加的值不能和之前添加的重合。
如圖：
需求： 唯一條碼輸入框，輸入一行清單回車添加一個，并清空目前輸入框。
疑點： 首先輸入一行按回車，值分幾種情況，(一)、 如果按回車前有值卻和之前重合該如何 。(二)、如果按回車前沒有隻要添加，隻是點選輸入框後，有臨時改變主意不添加，這種情況如何。(三)、如果不想隻用回車添加，也可以有其他方法。(四)、添加到清單後的資料，可以再修改。(五)、修改後的資料也分有值還是沒值，也可以用回車的方式确定值。
具體代碼：
HTML（表格）：
<!-- 表格 start (2.0)-->
<el-table :data="roseArr" height="283" style="width: 100%">
<el-table-column
type="index"
:index="indexMethod"
label="序号"
width="100"
align="center"
></el-table-column>
<el-table-column prop="filterBarCode" label="條碼" width="280" align="center">
<template slot-scope="scope">
<el-input
:disabled="isOKs"
ref="filterCode"
type="text"
v-model="scope.row.filterBarCode"
@blur="doingtit(scope.row.filterBarCode,scope.$index)"
@keyup.enter.native="addByEnterKey(scope.row.filterBarCode,scope.$index)"
:placeholder="placeTit"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click.native.prevent="deleteRow(scope.row,scope.$index)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 表格 end (2.0)-->
Script (methods):
addByEnterKey(row, index) {
// console.log(row, index);
//公共的對象
var objBath = {};
objBath.filterBarCode = row;
if (row) {
//如果按回車時有值
//如果是序号為0 的所在行的輸入行 輸入回車 情況1
if (index == 0) {
//過濾
console.log(this.roseArr);
//newarr 裡面為過濾出來符合條件的元素
let newarr = this.roseArr.filter(ele => ele.filterBarCode == row);
//row 相等的狀況隻有一次為絕對條件，隻有一個情況相等次數為1，那就是輸入的時候
//如果newarr 裡面符合條件的元素數大于1，就提示且不能加入數組中
if (newarr.length > 1) {
this.$message({
showClose: true,
message: "警告哦，輸入重複！",
duration: 3000,
type: "warning"
});
// console.log("111")
this.roseArr[0].filterBarCode = "";
} else {
//如果newarr 裡面符合條件的元素數等于1，就加入數組中
// console.log("111")
this.roseArr[0].filterBarCode = "";
this.roseArr.push(objBath);
}
console.log(newarr);
} else if (index !== 0) {
//如果不是序号為0的輸入行 按回車情況2
// console.log("222");
for (let j = 1; j < this.roseArr.length; j++) {
//不能是本行 排除掉本行
// 如果輸入的值與清單中的值相同就提示 并不修改，否則修改本行
if (row == this.roseArr[j].filterBarCode && j !== index) {
this.$message({
showClose: true,
message: "警告哦，輸入重複！",
duration: 3000,
type: "warning"
});
}
}
}
}
console.log(this.roseArr);
},
2、怎麼利用路由切換頁面并Tabs 也一并改變
如圖：左側導航
點選左側導航跳轉頁面，還要在頂部有Tabs 标簽頁跳轉，并且每點選不同的導航标簽加上相對應的内容
直到這列導航都加滿。
注意點：(1)、标簽頁加上是不同的，因為有時候會連續點選相同的導航，或者隔着時間再點選，是以要注意。(2)、還有每次重新整理後，顯示頁面是重新整理前最後點選顯示的頁面。(3)、标簽頁可删除，删除也要注意顯示的頁面具體是什麼。如果删到最後一個，要提示，并跳轉到其他頁面。
我先是另寫一個vue 元件 bread.vue。
如圖：
檔案結構
引到main.vue 中。
代碼：
HTML：
<el-main width="89%">
<article style="flex:1; box-sizing: border-box;" class="art_back">
<mybread
v-show="ishow"
style="background:#fff;margin:10px 0;width:100%;line-height:40px;text-align:left;padding-left:20px;box-sizing: border-box;"
:textList="textList"
:texttit="texttit"
></mybread>
<router-view></router-view>
</article>
</el-main>
bread.vue 中的代碼
代碼：
HTML：
<template>
<div style="width:100%;">
<el-tabs
v-model="editableTabsValue"
type="card"
closable
@tab-click="handleTabsEdit"
@tab-remove="removeTab"
>
<el-tab-pane
v-for="(item,index) in editableTabs"
:label="item"
:name="item"
:key="index"
></el-tab-pane>
</el-tabs>
<!-- <el-breadcrumb separator-class="el-icon-arrow-right" style="height:100%;">
<el-breadcrumb-item :to="{ path: '/um' }">系統管理</el-breadcrumb-item>
<el-breadcrumb-item>{{name2}}</el-breadcrumb-item>
</el-breadcrumb>-->
</div>
</template>
首先，介紹一下Tabs屬性和事件
我要達成頁面初步效果，第一步樣式設成卡片 化 type=“card”,可以删除 加上屬性 closeable。 第二步填上事件。前端的自我修養之vue結合element-ui 元件 遇到的問題總結 二之國二、項目問答
bread.vue 告一段落。要着重寫左側導航和main.vue 的傳值。通過點選标簽頁加一不重複的。
思路：在data 中寫數組，裡面根據要的導航，就寫多少，對象裡面有name和id 屬性，用來傳值和跳轉路由
menuArr: [
{
id: "/um",
name: "使用者管理"
},
{
id: "/mM",
name: "監控管理"
},
{
id: "/im",
name: "項目管理"
},
{
id: "/sm",
name: "子系統管理"
},
{
id: "/md",
name: "子產品管理"
}
]
<el-menu-item
@click="jumpList(i.name)"
v-for="(i,o) in menuArr"
:key="o"
:index="i.id"
>{{i.name}}</el-menu-item>
注意：
Script:
<script>
export default {
data() {
return {
// name1: "",
// name2: "",
//tags
editableTabsValue: "1",
editableTabs: [],
tabIndex: 2
};
},
props: {
textList: {
type: Array,
default: () => []
},
texttit: {
type: String,
default: ""
}
},
watch: {
// $route() {
// this.name1 = this.$route.meta.parentTitle;
// this.name2 = this.$route.meta.title;
// },
textList(newV, oldV) {
window.console.log(newV, oldV);
this.editableTabs = newV;
this.getlist();
},
texttit(newV, oldV) {
window.console.log(newV, oldV);
this.editableTabsValue = newV;
}
},
mounted() {
// window.console.log(this.$route.meta.parentTitle)
// this.name1 = this.$route.meta.parentTitle;
// this.name2 = this.$route.meta.title;
this.getlist();
},
methods: {
getlist() {
this.editableTabs = this.textList;
window.console.log(this.editableTabsValue);
// this.$router.push({ name: this.editableTabsValue.toString() });
},
//跳轉頁面
handleTabsEdit(tab) {
window.console.log(tab.name);
this.$router.push({ name: tab.name });
},
// 跳轉頁面
jump(name) {
this.$router.push({ name: name });
this.editableTabsValue = name;
},
// 删除tabs
removeTab(targetName) {
let tabs = this.editableTabs;
let activeName = this.editableTabsValue;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab;
}
}
});
}
window.console.log(targetName);
this.editableTabsValue = activeName;
this.editableTabs = tabs.filter(tab => tab !== targetName);
window.console.log(this.editableTabs);
if (this.editableTabs.length == 0) {
this.$message({
message: "自動跳轉到首頁",
type: "warning"
});
this.$router.push("/main");
} else {
this.jump(this.editableTabsValue);
}
}
}
};
</script>