console
new Vue({
el: '#app',
data() {
return {
yearData: {
"2018":[{
"month": "2月",
"xmljcz":"ds",
"xmljsr":"Ada",
"xmljysk":"asfd",
"bnljsr":"asdf",
"bnljscjyzjz":"afd",
"bnljcz":"Asd",
"bnljysk":"As",
"bnljjyyjsy":"tr",
},{
"month": "3月",
"xmljcz":"ds",
"xmljsr":"Ada",
"xmljysk":"asfd",
"bnljsr":"asdf",
"bnljscjyzjz":"afd",
"bnljcz":"Asd",
"bnljysk":"As",
"bnljjyyjsy":"tr",
}],
"2019":[{
"month": "4月",
"xmljcz":"ds",
"xmljsr":"Ada",
"xmljysk":"asfd",
"bnljsr":"asdf",
"bnljscjyzjz":"afd",
"bnljcz":"Asd",
"bnljysk":"As",
"bnljjyyjsy":"tr",
},{
"month": "5月",
"xmljcz":"ds",
"xmljsr":"Ada",
"xmljysk":"asfd",
"bnljsr":"asdf",
"bnljscjyzjz":"afd",
"bnljcz":"Asd",
"bnljysk":"As",
"bnljjyyjsy":"tr",
}]
},
}
},
methods: {
deleteRow(index, rows,year) {
let arr = JSON.parse(JSON.stringify(rows));
arr.splice(index, 1);
this.$set(this.yearData,year,arr);
}
}
})
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
<div id="app">
<template>
<div v-for="(data,year) in yearData">
<h3>{{year}}</h3>
<el-table
:data="data"
style="width: 100%"
max-height="250">
<el-table-column
fixed
prop="month"
label="月份"
>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
>
<template slot-scope="scope">
<el-button
@click.native.prevent="deleteRow(scope.$index,data,year)"
type="text"
size="small">
移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</div>