将创建的数据追加到列表中
//html
<input v-model="orderText" :placeholder="$t('languageInstructions.inputText')" />
<input v-model="urlText" />
//js
data() {
return {
orderText: "",
urlText: "",
tableData: localStorage.getItem("orderDatass") ? JSON.parse((localStorage.getItem("orderDatass"))) : []
}
},
methods: {
let addData = {
name: this.orderText,
func: 'website',
url: this.urlText
}
this.tableData.push(addData);
}
完整代码:
<template>
<div>
<RenderHeader />
<div class="mouseBackBox">
<Header />
<div class="setBackBox">
<div class="createBox">
<div class="inputBox">
<span class="title">{{$t('languageInstructions.text')}}</span>
<input v-model="orderText" :placeholder="$t('languageInstructions.inputText')" />
</div>
<div class="inputBox">
<span class="title">{{$t('languageInstructions.CommandFun')}}</span>
<span class="wangye">{{$t('languageInstructions.website')}}</span>
</div>
<div class="inputBox">
<span class="title">{{$t('languageInstructions.url')}}</span>
<input v-model="urlText" />
</div>
<div class="inputBox" style="text-align: center;">
<button @click="cancle">{{$t('languageInstructions.cancle')}}</button>
<button @click="creat" style="background-color: #3b8fe9;color: white;">{{$t('languageInstructions.create')}}</button>
</div>
</div>
<div class="tabListBox">
<el-table max-height="270" :data="tableData" style=" 100%;" border :header-cell-style="{'text-align':'center',background:'#fafafa'}">
<el-table-column fixed prop="name" label="指令" width="100" align="center">
</el-table-column>
<el-table-column prop="func" label="功能" width="100" align="center">
</el-table-column>
<el-table-column prop="url" label="执行路径" width="349">
</el-table-column>
<el-table-column label="操作" width="100" align="center">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
<img src="../../assets/img/ic_delete16.png" />
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
import Header from "../Header/Header.vue"
import RenderHeader from "../Header/RenderHeader.vue"
export default {
components: {
Header,
RenderHeader
},
data() {
return {
orderText: "",
urlText: "",
tableData: localStorage.getItem("orderDatass") ? JSON.parse((localStorage.getItem("orderDatass"))) : []
}
},
methods: {
cancle() {
this.orderText = "";
this.urlText = "";
},
creat() {
if (this.orderText == "" || this.urlText == "") {
alert("指令文本或指令路径不能为空")
return;
}
let addData = {
name: this.orderText,
func: 'website',
url: this.urlText
}
this.tableData.push(addData);
localStorage.setItem("orderDatass", JSON.stringify(this.tableData));
this.orderText = "";
this.urlText = "";
},
deleteRow(index, rows) {
rows.splice(index, 1);
localStorage.setItem("orderDatass", JSON.stringify(rows))
}
}
}
</script>
<style lang="css" scoped>
.createBox {
height: 200px;
650px;
margin: 20px 20px 0px 20px;
}
.inputBox {
margin-bottom: 10px;
}
.inputBox input {
560px;
height: 36px;
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #d5d5d5;
margin-left: 14px;
padding-left: 10px;
}
.inputBox button {
100px;
height: 36px;
background-color: #ffffff;
border-radius: 4px;
border: solid 1px #dddddd;
font-size: 14px;
font-family: SourceHanSansCN-Regular;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
}
.title {
display: inline-block;
font-family: SourceHanSansCN-Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
56px;
height: 14px;
}
.wangye {
80px;
height: 36px;
background-color: #ebf3fc;
border-radius: 18px;
border: solid 1px #3b8fe9;
font-family: SourceHanSansCN-Regular;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #3b8fe9;
display: inline-block;
line-height: 36px;
text-align: center;
margin-left: 14px;
}
.tabListBox {
height: 270px;
650px;
margin: 0px 20px;
}
.tabListBox>>>.el-table__header tr,
.tabListBox>>>.el-table__header th {
padding: 0;
height: 40px;
}
.tabListBox>>>.el-table__body tr,
.tabListBox>>>.el-table__body td {
padding: 2px;
height: 40px;
}
</style>