一、实现步骤
第一步:定义子组件myTable,是一个基于iview表格封装的表格。
第二步:
1.在子组件myTable里,可以拿到父组件传来的、用来配置表格的column数组。
2.判断是否有编辑属性
3.如果有编辑属性,可以自定义编辑函数(即name列)
i>如果当前项,是被点击项,则展示input; 否则,展示默认值 (效果:点击编辑按钮,展示对应input)
ii>编辑Input里内容时,不断同步表单row值;
iii>点击保存时,恢复静态展示~(效果:点击保存,展示静态文本)
二、伪代码
父组件:
<template>
<div id="my-table-page">
<my-table :columns="columns1" :data="data1"></my-table>
</div>
</template>
<script type='text/ecmascript-6'>
import MyTable from "@/components/MyTable";
export default {
name: "MyTablePage",
components: {
MyTable
},
data() {
return {
columns1: [
{
edit:true,
title: "Name",
key: "name"
},
{
title: "Age",
key: "age"
},
{
title: "Address",
key: "address"
}
],
data1: [
{
name: "John Brown",
age: 18,
address: "New York No. 1 Lake Park",
date: "2016-10-03"
},
{
name: "Jim Green",
age: 24,
address: "London No. 1 Lake Park",
date: "2016-10-01"
},
{
name: "Joe Black",
age: 30,
address: "Sydney No. 1 Lake Park",
date: "2016-10-02"
},
{
name: "Jon Snow",
age: 26,
address: "Ottawa No. 2 Lake Park",
date: "2016-10-04"
}
]
};
},
};
</script>
<style>
</style>
子组件myTable:
<template>
<div id="my-table">
<Table :columns="myColumns" :data="data"></Table>
</div>
</template>
<script>
export default {
name: "MyTable",
props: ["columns", "data"],
data() {
return {
myColumns: [],
editIndex: -1
};
},
methods: {
edit(i) {
this.editIndex = i;
},
save(column, row, index) {
this.editIndex = -1;
},
change(val, column, row, index) {
row[column.key] = val;
}
},
mounted() {
let that = this;
that.myColumns = that.columns.map(column => {
if (column.edit) {
column.render = function(h, { column, row, index }) {
return (
<div>
{index === that.editIndex ? (
<div>
<i-input
type="text"
value={row[column.key]}
on-input={(e) => {
that.change(e, column, row, index);
}}
/>
<i-button
on-click={() => {
that.save(column, row, index);
}}
style="margin-left:20px;"
>
保存
</i-button>
</div>
) : (
<div>
{row[column.key]}
<i-button
on-click={() => {
that.edit(index);
}}
style="margin-left:20px;"
>
编辑
</i-button>
</div>
)}
</div>
);
};
}
return column;
});
}
};
</script>
注意:vue jsx语法,非常接近于react jsx语法,所以,在vue jsx中,不能使用vue 指令(比如 v-for、 v-bind:click等)。