嘉兴cms建站模板,WordPress 营利,个人征信查询,wordpress拼团实现思路#xff1a;
1.点击当前行通过row拿到当前行数据。
2.将当前行数据传给子组件。
3.子组件监听父组件传过来的数据并映射在界面。
4.点击保存将修改的值传给父组件更新表格。
5.父组件收到修改过后的值#xff0c;可以通过字段判断比如id#xff0c;通过 findIn…实现思路
1.点击当前行通过row拿到当前行数据。
2.将当前行数据传给子组件。
3.子组件监听父组件传过来的数据并映射在界面。
4.点击保存将修改的值传给父组件更新表格。
5.父组件收到修改过后的值可以通过字段判断比如id通过 findIndex找到是哪条数据修改了然后在更新表格数据
table.vue
templatedivel-button clickadd新增数据/el-buttonel-table :datatableData border cell-clickcellClickel-table-column propname label名称 width180/el-table-columnel-table-column propage label年龄 width180/el-table-columnel-table-column propgender label性别 width180/el-table-columnel-table-column label操作template #default{ row }el-button typeprimary clickedit(row)编辑/el-button/template/el-table-column/el-tableBoundaryv-ifshowEdit:updateperson.selectedRowupdateTableupdateTable//div
/templatescript setup
import { ref, reactive } from vue;import Boundary from ./Boundary.vue;const tableData ref([{ name: 张三, age: 18, gender: 男, id: 1 },{ name: 李四, age: 20, gender: 女, id: 2 },
]);
const person reactive({selectedRow: ,
});
const showEdit ref(false);
// 点击单行
function cellClick(row) {showEdit.value true;person.selectedRow { ...row };
}
// 点击编辑按钮
function edit(row) {showEdit.value true;person.selectedRow { ...row };
}
// 点击按钮在表格中新增一条数据,id递增
function add() {tableData.value.push({name: ,age: null,gender: ,id: tableData.value.length 1,});
}
// 根据id找出索引
function updateTable(newData) {const index tableData.value.findIndex((item) item.id newData.id);tableData.value.splice(index, 1, newData);
}
/script
Boundary.vue
templatedivinput v-modelperson.inputData.name placeholder请输入名称 /input v-modelperson.inputData.age placeholder请输入年龄 /input v-modelperson.inputData.gender placeholder请输入性别 /el-button typeprimary clicksave保存/el-button/div
/templatescript setup
import { ref, reactive, watch } from vue;
const emits defineEmits([updateTable]);
let props defineProps({update: {type: Object,default: {},},
});
const person reactive({inputData: {name: ,age: ,gender: ,id: ,},
});
function save() {emits(updateTable, person.inputData);
}
// 接收表格传过来的数据
person.inputData props.update;
// 监听父组件传过来的表格数据
watch(() props.update,(val) {person.inputData val;},{ deep: true }
);
/script
