feat: data table

src/App.vue

@@ -9,7 +9,7 @@
                 <WConfig></WConfig>
             </el-tab-pane>
             <el-tab-pane label="数据" name="data">
-                <WData :data="config.data"></WData>
+                <WData></WData>
             </el-tab-pane>
             <el-tab-pane label="导出" name="export">导出</el-tab-pane>
         </el-tabs>
@@ -26,14 +26,7 @@ import WChart from './components/WChart.vue';
 import WConfig from './components/WConfig.vue';
 import WData from './components/WData.vue';
 
-type Config = {
-    data: {name: string, value: number}[]
-};
-
 const activeName = 'config';
-const config: Config = {
-    data: [] as {name: string, value: number}[]
-};
 </script>
 
 <style>

src/components/WData.vue

@@ -1,49 +1,157 @@
 <template>
     <div>
-        <div class="table" ref="tableRef">
-        </div>
+        <el-table class="word-table"
+            :data="tableData"
+        >
+            <el-table-column
+                fixed
+                prop="name"
+                label="文本"
+            >
+                <template v-slot="scope">
+                    <el-input
+                        v-if="scope && scope.row.editAttr === 'name'"
+                        size="small"
+                        v-model="scope.row.name"
+                        @blur="doneEditing(scope.row)"
+                    >
+                    </el-input>
+                    <span
+                        v-if="scope && scope.row.editAttr !== 'name'"
+                        @click="edit(scope.row, 'name')"
+                    >
+                        {{ scope.row.name }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                prop="value"
+                label="字号"
+            >
+                <template v-slot="scope">
+                    <el-input
+                        v-if="scope && scope.row.editAttr === 'value'"
+                        size="small"
+                        v-model="scope.row.value"
+                        @blur="doneEditing(scope.row)"
+                    >
+                    </el-input>
+                    <span
+                        v-if="scope && scope.row.editAttr !== 'value'"
+                        @click="edit(scope.row, 'value')"
+                    >
+                        {{ scope.row.value }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="操作"
+                width="50"
+            >
+                <template v-slot="scope">
+                    <el-button
+                        type="text"
+                        size="small"
+                        @click="removeData(scope.row)"
+                    >
+                        删除
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-table class="word-table"
+            :show-header="false"
+            :data="pendingData"
+        >
+            <el-table-column
+                fixed
+                prop="name"
+                label="文本"
+            >
+                <template v-slot="scope">
+                    <el-input
+                        size="small"
+                        v-model="scope.row.name"
+                    >
+                    </el-input>
+                </template>
+            </el-table-column>
+            <el-table-column
+                prop="value"
+                label="字号"
+            >
+                <template v-slot="scope">
+                    <el-input
+                        size="small"
+                        v-model="scope.row.value"
+                    >
+                    </el-input>
+                </template>
+            </el-table-column>
+            <el-table-column
+                label="操作"
+                width="50"
+            >
+                <template v-slot="scope">
+                    <el-button
+                        type="text"
+                        size="small"
+                        @click="addRow()"
+                    >
+                        添加
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
 </template>
 
-
 <script setup lang="ts">
-import { toRefs, PropType } from 'vue';
+import { ref } from 'vue';
 
-const props = defineProps({
-  data: Array as PropType<{ value: number, name: string }[]>
-});
-const { data } = toRefs(props);
-</script>
+type WordData = {
+    name?: string;
+    value?: number;
+    editAttr?: string;
+};
 
-<style lang="scss">
-.title-right {
-    position: absolute;
-    top: 10px;
-    right: 0;
+const tableData = ref([{name: '测试', value: 100}] as WordData[]);
+const pendingData = ref([{}] as WordData[]);
 
-    a {
-        display: inline-block;
-    }
+function removeData(row: WordData) {
+    tableData.value = tableData.value.filter(item => item !== row);
 }
 
-.el-color-picker {
-    margin-right: 5px;
+function edit(row: WordData, attr: 'name' | 'value') {
+    console.log('edit', row, attr)
+    row.editAttr = attr;
 }
 
-.color-picker-btn {
-    display: inline-block;
-    width: 30px;
-    height: 30px;
-    margin-right: 5px;
-    padding: 3px 6px;
-    box-sizing: border-box;
-    vertical-align: top;
-    border: 1px solid #e6e6e6;
-    border-radius: 4px;
-    color: #409EFF;
+function doneEditing(row: WordData) {
+    row.editAttr = undefined;
 }
 
-.text-pad {
-    padding: 8px 0;
+function addRow() {
+    if (pendingData.value[0].name && pendingData.value[0].value) {
+        const value = parseFloat(pendingData.value[0].value as unknown as string);
+        if (isNaN(value)) {
+            alert('请输入数字');
+            return;
+        }
+        else {
+        tableData.value.push({
+            name: pendingData.value[0].name,
+            value
+        });
+        pendingData.value = [{}];
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.word-table {
+    width: 100%;
 }
 </style>