Skip to content
Permalink
Browse files
feat: data table
  • Loading branch information
Ovilia committed Dec 14, 2021
1 parent df7cd77 commit 116bb3c7409bc83ea7478ec44d3c73e3bb7108bf
Showing 2 changed files with 141 additions and 40 deletions.
@@ -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>
@@ -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>

0 comments on commit 116bb3c

Please sign in to comment.