集约化网站建设情况经验材料,发帖推广哪个平台好,网站开发一个支付功能要好多钱,wordpress commerce需求#xff1a;页面里有个table#xff0c;点击编辑可以编辑该table#xff0c;保存数据并展示到页面上来第一种方法就是把编辑态的table做成子组件(且叫editeTable)#xff0c;通过v-show判断是否进入编辑态来显示隐藏。先仿造原本父组件(且叫fatherTable)#xff0c;做…需求页面里有个table点击编辑可以编辑该table保存数据并展示到页面上来第一种方法就是把编辑态的table做成子组件(且叫editeTable)通过v-show判断是否进入编辑态来显示隐藏。先仿造原本父组件(且叫fatherTable)做了一些基本的table样式子组件editeTable里的tr每格皆为antd-Form表单输入框接收fatherTable的data数据用Form的API——validateFields校验并获取输入域的值进行编辑用户编辑完后点保存然后editeTable里的数据通过$emit函数showPage()传递给fatherTable覆盖掉fatherTable原本的data数据这样即可实现。以下为部分代码(不全)12345678910111213141516171819202122232425262728293031323334353637383940414243v-showthis.editeType:editeDataentityinfo:editeTypeediteTypeshowPageediteShow// 子组件jsexport default {props: {editeData: Object,editeType: Boolean},mounted() {this.initDate();},watch: {editeType: function() {// console.log(this.editeType);if(this.editeType){setTimeout((){this.initDate();},200)// this.initDate();// console.log(111,this.editeData)}else {this.form.setFieldsValue(this.entityinfo);}},methods: {handleSearch(e) {e.preventDefault();this.form.validateFields((error, values) {// console.log(error, error);// console.log(Received values of form: , values);// console.log(values);this.$emit(showPage, values)});this.from.validateFields();}}另一种方法是用antd-table自带的编辑edite功能这个功能可以实现对每一行的数据进行定点编辑但是遇到一个坑如果我编辑态也是做成一个子组件的话就需要先在子组件通过props取到父组件传来的值data但我们都知道子组件是没有权利更改父组件传过来的值这时候我们需要定义一个新的变量newdata通过深拷贝data给newdata赋值但细看antd文档就知道antd-table里的数据需要每一条数据都有一个属于自己的key值然后我们的data并没有key值此时就需要遍历newdata给每个对象就push一个key值。然后在newdata上进行操作。1234this.newData [...this.data] || [];this.newData.forEach((item,index) {item.key index;}而且要注意一点就是antd-table的dataIndex和scopedSlots必须为同名否则不生效这是第二个坑所以newdata在初始化数据要注意。之后编辑获取到新的newdata便可以通过$emit给父组件传值得到编辑后的效果。以下为antd-table的部分实例代码1234567891011121314151617181920const columns [{title: name,dataIndex: name,width: 25%,scopedSlots: { customRender: name },}, {title: operation,dataIndex: operation,scopedSlots: { customRender: operation },}]const data []for (let i 0; i 100; i) {data.push({key: i.toString(),name: Edrward ${i},age: 32,address: London Park no. ${i},})}
