134 lines
2.7 KiB
Vue
134 lines
2.7 KiB
Vue
<script>
|
|
import Vue from 'vue'
|
|
|
|
export default {
|
|
name: "tableEditor",
|
|
model: {
|
|
event: "input",
|
|
prop: "tableData"
|
|
},
|
|
props: {
|
|
label: String,
|
|
tableData: {default: () => []},
|
|
configs: {default: () => []}
|
|
},
|
|
data() {
|
|
return {
|
|
records: []
|
|
}
|
|
},
|
|
computed: {
|
|
option() {
|
|
return {
|
|
size: 'mini',
|
|
filterDic: true,
|
|
cellBtn: true,
|
|
menuWidth: 120,
|
|
addBtn: false,
|
|
columnBtn: false,
|
|
refreshBtn: false,
|
|
border: true,
|
|
delBtnText: " ",
|
|
editBtnText: " ",
|
|
saveBtnText: " ",
|
|
saveBtnIcon: "el-icon-check",
|
|
cancelBtnText: " ",
|
|
cancelBtnIcon: "el-icon-close",
|
|
column: this.configs.map(e => {
|
|
const item = this.$copy(e)
|
|
delete item.$index
|
|
delete item.$cellEdit
|
|
return {...item, cell: true}
|
|
})
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
rowSave(form, done) {
|
|
this.$emit("input", this.records)
|
|
this.$emit("data", this.getFormatData())
|
|
done()
|
|
},
|
|
getFormatData() {
|
|
return this.configs.map((c, i) => {
|
|
const item = {name: c.label}
|
|
this.records.map((row, j) => item[`v${j || ""}`] = row[`c${i || ""}`])
|
|
return item
|
|
})
|
|
}
|
|
},
|
|
created() {
|
|
Vue.use(window.AVUE, {
|
|
size: 'mini',
|
|
tableSize: 'mini',
|
|
calcHeight: 36,
|
|
})
|
|
this.records = this.tableData.map(e => ({$cellEdit: true, ...e}))
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="tableEditor">
|
|
<avue-crud :option="option" :data="records" @row-save="rowSave" @row-cancel="rowSave">
|
|
<template v-if="label" v-slot:menuLeft>
|
|
<div class="label" v-text="label"/>
|
|
</template>
|
|
<template v-slot:menuRight>
|
|
<div class="el-icon-plus pointer" @click="records.push({$cellEdit: true})">增加数据</div>
|
|
</template>
|
|
</avue-crud>
|
|
</section>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.tableEditor {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-bottom: 10px;
|
|
|
|
:deep(.avue-crud__body) {
|
|
background-color: transparent;
|
|
|
|
.avue-crud__header, .el-table, tr {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.avue-crud__header {
|
|
min-height: unset;
|
|
}
|
|
|
|
.el-table__cell {
|
|
color: white;
|
|
background-color: transparent;
|
|
|
|
input:disabled {
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
color: white;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
width: 60px;
|
|
color: #FFFFFF;
|
|
font-size: 12px;
|
|
text-align: right;
|
|
}
|
|
|
|
.el-icon-plus {
|
|
font-size: 12px;
|
|
color: $primaryColor;
|
|
|
|
&:before {
|
|
margin-right: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|