This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch master
in repository
https://gitbox.apache.org/repos/asf/echarts-wordcloud-generator.git
commit 116bb3c7409bc83ea7478ec44d3c73e3bb7108bf
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Tue Dec 14 16:22:23 2021 +0800
feat: data table
---
src/App.vue | 9 +--
src/components/WData.vue | 172 ++++++++++++++++++++++++++++++++++++++---------
2 files changed, 141 insertions(+), 40 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f134f7f..884a177 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/WData.vue b/src/components/WData.vue
index fe12679..502a332 100644
--- a/src/components/WData.vue
+++ b/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>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
