前端的自我修养之vue结合element-ui 组件 遇到的问题总结 二之国
二、项目问答
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。 第二步填上事件。
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>