版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
在日常的开发过程中,可编辑表格的应用场景还是很多的。在尝试实现该功能时,发现没有很便捷的实现方式,官方文档也没有具体案例;于是自己动手简单写了个demo 仅供参考
具体代码如下所示 :
<template>
<div style="padding:50px;">
<Divider>
<Button @click="addRow">Add Row</Button>
</Divider>
<Table ref="myTable" border :columns="columns" :data="data">
<template slot="name" slot-scope="props">
<Form :ref="'formDynamic'+props.idx" :model="props.row">
<FormItem prop="name" :rules="{required: true, message: '请输入称呼', trigger: 'blur'}">
<Input v-model="props.row.name" size="small"></Input>
</FormItem>
</Form>
</template>
<template slot="date" slot-scope="props">
<DatePicker
v-model="props.row.date"
type="date"
placeholder="Select date"
style="width: 140px"
></DatePicker>
</template>
<!-- 操作 -->
<template slot="action" slot-scope="props">
<Poptip @on-ok="delRow(props.idx)" confirm title="Delete this item?" transfer>
<Button type="warning" size="small">删除</Button>
</Poptip>
</template>
</Table>
<div style="text-align:right;padding:8px 0;">
<Button type="primary" @click="checkData">Check Data</Button>
</div>
<Divider>data</Divider>
{{data}}
<div style="display:none;">{{act}}</div>
</div>
</template>
<script>
export default {
data() {
return {
act: false, // 用于触发渲染
formDynamic: {},
data: [],
columns: [
{
title: "称呼",
key: "name",
render: (h, params) => {
this.data[params.index] = params.row;
return h(
"div",
this.$refs.myTable.$scopedSlots.name({
row: params.row,
idx: params.row._index
})
);
}
},
{
title: "年龄",
key: "age"
},
{
title: "日期",
key: "date",
render: (h, params) => {
this.data[params.index] = params.row;
return h(
"div",
this.$refs.myTable.$scopedSlots.date({
row: params.row,
idx: params.row._index
})
);
}
},
{
title: "地址",
key: "address"
},
{
title: "操作",
key: "action",
render: (h, params) => {
return h(
"div",
this.$refs.myTable.$scopedSlots.action({
idx: params.row._index
})
);
}
}
]
};
},
methods: {
checkData() {
console.log("checkData", this.$refs);
for (let i = 0, len = this.data.length; i < len; i++) {
this.$refs["formDynamic" + i].validate(valid => {
if (valid) {
// this.$Message.success('Success!')
} else {
// this.$Message.error('Fail!')
}
});
}
},
/** 删除行 */
delRow(idx) {
this.data.splice(idx, 1);
this.$nextTick(() => {
this.act = !this.act;
});
},
/** 添加行 */
addRow() {
this.data.push({
name: "",
age: 18,
date: "",
address: "Beijing"
});
this.$nextTick(() => {
this.act = !this.act;
});
}
},
mounted() {
this.addRow();
}
};
</script>
<style>
</style>