主要结合了scope来封装该组件
通过底部添加按钮添加一行可编辑的表格行,编辑后点击确定保存,可重新打开该行进行编辑,或者直接删除。
组件部分代码TableEdit.vue
<template>
<div id="app">
<el-row>
<el-col :span="24">
<el-table size="mini" :data="tableData" border style="width: 100%" highlight-current-row>
<!-- <el-table-column type="index"></el-table-column> -->
<el-table-column
v-for="(item,index) in tableTitle"
:key="index"
:label="item.label"
:prop="item.prop">
<template #default="scope">
<span v-if="scope.row.isSet">
<input v-if="item.type =='input'" class="iteminput" placeholder="请输入" :value="sel[item.prop]" @change="inputChange($event,item.prop)"/>
<el-select v-if="item.type =='select'" v-model="sel[item.prop]" placeholder="请选择">
<el-option
v-for="it in item.options"
:key="it.value"
:label="it.label"
:value="it.label+'/'+it.value">
</el-option>
</el-select>
</span>
<span v-else>
<span v-if="item.type =='input'">{{scope.row[item.prop]}}</span>
<span v-if="item.type =='select'">{{scope.row[item.prop].split('/')[0]}}</span>
</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="200">
<template #default="scope">
<span class="el-tag el-tag--primary el-tag--mini" style="cursor: pointer; margin-right:10px;" @click.stop="saveRow(scope.row,scope.$index)">
确定
</span>
<span class="el-tag el-tag--primary el-tag--mini" style="cursor: pointer; margin-right:10px;" @click="editRow(scope.row,scope.$index)">
编辑
</span>
<span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer; margin-right:10px;" @click="deleteRow(scope.$index,tableData,scope.row)">
删除
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col :span="24">
<div class="el-table-add-row" style="width: 99.2%;" @click="addRow()"><span>+ 添加</span></div>
</el-col>
</el-row>
<!-- <span>{{tableData}}</span> -->
</div>
</template>
<script>
export default ({
props: {
datas: Object
},
data(){
return{
tableTitle: [],
tableData: [],
sel: {}, //选中行
}
},
watch: {
//普通的watch监听
tableData(newName, oldName) {
this.tableData = newName;
}
},
mounted(){
console.log(111)
console.log(this.datas)
if(this.datas != null){
this.tableTitle = this.datas.tableTitle
this.tableData = this.datas.tableData
}
},
methods:{
addRow(){
for (const i of this.tableData) {
if (i.isSet){
return
}
}
let data = {
key:{
isSet:true
}
};
console.log(this.tableTitle)
this.tableTitle.forEach((item)=>{
data.key[item.prop] = ''
})
this.tableData.push(JSON.parse(JSON.stringify(data.key)));
console.log(this.sel)
console.log(this.tableData)
this.sel = JSON.parse(JSON.stringify(data.key));
},
inputChange(e,prop) {
this.sel[prop] = e.target.value;
console.log(this.sel)
},
saveRow(row,index){
console.log(row)
if(row.isSet){
const datas = JSON.parse(JSON.stringify(this.sel));
for (const k in datas) {
row[k] = datas[k] //将sel里面的value赋值给这一行。ps(for....in..)的妙用,细心的同学发现这里我并没有循环对象row
}
row.isSet = false;
this.$emit("update:FathersaveRow",row);
}
},
editRow(row){
for (const i of this.tableData) {
if (i.isSet){
this.$message({
type: 'warning',
message: '请保存当前编辑项'
});
return;
}
}
this.sel = row
row.isSet = true
},
deleteRow(index, rows, row){
console.log(row)
this.$emit("update:FatherdeleteRow",row);
rows.splice(index, 1);
}
}
})
</script>
<style lang="scss" >
.iteminput{
height:28px; line-height:28px; border-radius: 6px; border:1px solid #ddd;padding-left:5px;width:90%;
}
.el-table-add-row {
margin-top: 10px;
width: 100%;
height: 34px;
border: 1px dashed #c1c1cd;
border-radius: 3px;
cursor: pointer;
justify-content: center;
display: flex;
line-height: 34px;
}
</style>
调用部分代码
<TableEdit
:datas="sxdataTable"
@update:FathersaveRow="FathersaveRow"
@update:FatherdeleteRow="FatherdeleteRow"
/>
import TableEdit from '@/components/TableEdit'
export default {
components: {
TableEdit
},
data() {
return {
sxdataTable: {
tableTitle: [
{prop:'valueType',label:'类型',type:'select',options:[{value:'0',label:'温度'},{value:'1',label:'湿度'},{value:'2',label:'氨气浓度'},{value:'3',label:'料塔预料'}]},
{prop:'minvalue',label:'最小值',type:'input'},
{prop:'maxvalue2',label:'最大值',type:'input'},
{prop:'alarmType',label:'报警方式',type:'select',options:[{value:'0',label:'电话'},{value:'1',label:'短信'},{value:'2',label:'现场(平板)'}]}
],
tableData:[]
}
}
},
methods: {
FatherdeleteRow(){
},
FathersaveRow(val){
console.log(val);
console.log(this.sxdataTable.tableData)
},
}