| <template> |
| <div> |
| <!-- <el-checkbox :v-model="fillSmall">用小于 10 的数据填充剩余空间</el-checkbox> --> |
| <el-table class="word-table" :data="tableData" empty-text="无数据"> |
| <el-table-column 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" placeholder="文本"> |
| </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" |
| placeholder="相对大小" |
| > |
| </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 class="padding"> |
| <!-- <el-button type="primary" size="medium" @click="removeAll()"> |
| 导入 .cvs |
| </el-button> --> |
| <el-button type="danger" size="medium" @click="removeAll()"> |
| 清空 |
| </el-button> |
| </div> |
| </div> |
| </template> |
| |
| <script setup lang="ts"> |
| import { ref, defineEmits } from 'vue'; |
| |
| type WordData = { |
| name?: string; |
| value?: number; |
| editAttr?: string; |
| }; |
| |
| const tableData = ref([] as WordData[]); |
| const pendingData = ref([{}] as WordData[]); |
| const fillSmall = ref(true); |
| |
| const emit = defineEmits(['change']); |
| |
| defineExpose({ data: tableData, setData, fillSmall }); |
| |
| function setData(data: WordData[]) { |
| tableData.value = data; |
| emit('change'); |
| } |
| |
| function removeData(row: WordData) { |
| tableData.value = tableData.value.filter((item) => item !== row); |
| emit('change'); |
| } |
| |
| function edit(row: WordData, attr: 'name' | 'value') { |
| row.editAttr = attr; |
| } |
| |
| function doneEditing(row: WordData) { |
| row.editAttr = undefined; |
| emit('change'); |
| } |
| |
| function addRow() { |
| if (pendingData.value[0].name) { |
| const rawValue = pendingData.value[0].value as unknown as string; |
| const value = parseFloat(rawValue); |
| if (rawValue != null && rawValue !== '' && isNaN(value)) { |
| alert('请输入数字'); |
| return; |
| } else { |
| tableData.value.push({ |
| name: pendingData.value[0].name, |
| value |
| }); |
| pendingData.value = [{}]; |
| emit('change'); |
| } |
| } |
| } |
| |
| function removeAll() { |
| tableData.value = []; |
| emit('change'); |
| } |
| </script> |
| |
| <style lang="scss"> |
| .word-table { |
| width: 100%; |
| max-height: 400px; |
| overflow: auto; |
| } |
| |
| .padding { |
| padding: 10px; |
| } |
| </style> |