From e57098aa6e5d1498d87d76b8ae40b41faa57e854 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8B=AC=E5=AD=A4=E4=B9=9D=E5=89=91?= <843294669@qq.com>
Date: Mon, 3 Jul 2023 05:59:18 +0000
Subject: [PATCH] add readme.txt.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 独孤九剑 <843294669@qq.com>
---
 readme.txt | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 readme.txt

diff --git a/readme.txt b/readme.txt
new file mode 100644
index 000000000..0947a6c16
--- /dev/null
+++ b/readme.txt
@@ -0,0 +1,54 @@
+要实现动态JSON键值的列同时可编辑表格，您可以使用动态绑定和计算属性来创建模型和绑定表格数据。下面是一个示例代码，显示了如何实现这一点：
+
+```html
+<template>
+  <div>
+    <vxe-table :data="tableData">
+      <vxe-colgroup v-for="column in columns" :key="column.field" :title="column.title" :field="column.field" align="center" v-if="!column.children">
+        <vxe-column :edit-render="getEditRender(column.field)" :formatter="toMoney" align="center"></vxe-column>
+      </vxe-colgroup>
+      <vxe-colgroup v-for="column in columns" :key="column.field" :title="column.title" :field="column.field" align="center" v-else>
+        <vxe-column v-for="childColumn in column.children" :key="childColumn.field" :title="childColumn.title" :field="childColumn.field" :edit-render="getEditRender(childColumn.field)" :formatter="toMoney" align="center"></vxe-column>
+      </vxe-colgroup>
+    </vxe-table>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        { title: '标题1', field: 'field1' },
+        { title: '标题2', field: 'field2', children: [
+          { title: '子标题1', field: 'field2_1' },
+          { title: '子标题2', field: 'field2_2' }
+        ]},
+        // 添加更多列...
+      ]
+    };
+  },
+  computed: {
+    toMoney({ cellValue }) {
+      // 定义您的格式化方法
+      // 这里只是一个示例，您可以根据实际需要进行修改
+      return '$' + Number(cellValue).toFixed(2);
+    }
+  },
+  methods: {
+    getEditRender(field) {
+      return (scope) => {
+        return (
+          <vxe-input v-model={scope.row[field]} type="text"></vxe-input>
+        );
+      };
+    }
+  }
+};
+</script>
+```
+
+在这个例子中，`tableData`和`columns`是动态生成的数据，您可以根据实际情况进行修改。通过`vxe-table`组件，您可以根据`columns`数组动态创建表格的列和表头。`vxe-colgroup`组件用于处理具有子列的列。通过使用`vxe-column`组件，您可以为每个列定义编辑器渲染函数，并使用动态绑定将数据绑定到`vxe-input`组件上。您可以在`getEditRender`方法中使用计算属性来动态生成编辑器的渲染函数，并在其中使用`scope.row[field]`来绑定数据。
+
+请注意，此示例使用了Vue.js框架，并使用了JSX语法。如果您不使用Vue.js或不熟悉JSX，您可以将示例中的JSX代码改为普通的JavaScript代码，并使用相应的模板语法和事件处理器。希望对您有所帮助！
\ No newline at end of file
-- 
Gitee