console
var Main = {
data() {
return {
tableData: [{
date: 1551322088449,
name: 'Name1',
select: 1,
num: 26,
flag: false,
text: 'Content1',
childrens:[
{
name:'subName1',
select: 1,
num: 26,
flag: false,
text: 'Content1',
},
{
name:'subName2',
select: 1,
num: 26,
flag: false,
text: 'Content1',
}
]
},
{
date: 1552460833946,
name: 'Name2',
select: 0,
num: 28,
flag: true,
text: 'Content2'
},
{
date: 1552861035946,
name: 'Name3',
select: 0,
num: 28,
flag: true,
text: 'Content3'
}],
options: [{
label: 'Label1',
value: 1
},
{
label: 'Label2',
value: 0
}]
}
},
methods:{
addChildSheet(){
var childSheet = this.tableData[0].childrens;
for(var i=0;i<childSheet.length;i++){
this.$refs.editable.insertAt(childSheet[i],this.tableData[1])
}
this.$set(this.tableData[0],'showClose',true);
},
closeChildSheet(scope){
console.log(scope)
var childSheet = scope.row.childrens;
this.$refs.editable.remove(childSheet);
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="//unpkg.com/vue">
</script>
<script src="//unpkg.com/xe-utils">
</script>
<script src="//unpkg.com/element-ui">
</script>
<script src="//unpkg.com/vue-element-extends">
</script>
<div id="app">
<template>
<div>
<el-button @click="addChildSheet">
新增2行
</el-button>
<elx-editable ref="editable" :data.sync="tableData">
<elx-editable-column
label="closeChild" align="center"
>
<template slot="" slot-scope="scope">
<div v-show="scope.row.showClose" >
<el-button @click="closeChildSheet(scope)" type="danger" size="mini" plain>删除新增行</el-button>
</div>
</template>
</elx-editable-column>
<elx-editable-column prop="name" label="Readonly">
</elx-editable-column>
<elx-editable-column prop="select" label="Select" :edit-render="{name: 'ElSelect', options}">
</elx-editable-column>
<elx-editable-column prop="num" label="Number" :edit-render="{name: 'ElInputNumber'}">
</elx-editable-column>
<elx-editable-column prop="date" label="DatePicker" :edit-render="{name: 'ElDatePicker', attrs: {type: 'date', format: 'yyyy/MM/dd'}}">
</elx-editable-column>
<elx-editable-column prop="text" label="Input" :edit-render="{name: 'ElInput'}">
</elx-editable-column>
</elx-editable>
</div>
</template>
</div>
@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");
@import url("//unpkg.com/vue-element-extends/lib/index.css");