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