feat(视图): 增加字段一键清除按钮

This commit is contained in:
junjun 2022-11-15 10:36:03 +08:00
parent 7cf2f9da02
commit 6df9b2398f

View File

@ -440,10 +440,14 @@
v-if="view.type === 'table-pivot'"
class="padding-lr"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span>{{ $t('chart.table_pivot_row') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('xaxisExt')"
/>
</span>
<draggable
v-model="view.xaxisExt"
@ -482,7 +486,7 @@
v-if="view.type !=='text' && view.type !== 'gauge' && view.type !== 'liquid'"
class="padding-lr"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span v-if="view.type && view.type.includes('table')">{{
$t('chart.drag_block_table_data_column')
}}</span>
@ -511,6 +515,10 @@
<span
v-else-if="view.type && view.type === 'table-info'"
>{{ $t('chart.dimension_or_quota') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('xaxis')"
/>
</span>
<draggable
v-model="view.xaxis"
@ -554,7 +562,7 @@
|| (view.render === 'antv' && view.type === 'line')"
class="padding-lr"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span>
{{ $t('chart.chart_group') }}
<span
@ -578,6 +586,10 @@
style="cursor: pointer;color: #606266;"
/>
</el-tooltip>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('xaxisExt')"
/>
</span>
<draggable
v-model="view.xaxisExt"
@ -617,7 +629,7 @@
class="padding-lr"
style="margin-top: 6px;"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span v-if="view.type && view.type.includes('table')">{{
$t('chart.drag_block_table_data_column')
}}</span>
@ -654,6 +666,10 @@
}}</span>
<span v-show="view.type !== 'richTextView'"> / </span>
<span>{{ $t('chart.quota') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('yaxis')"
/>
</span>
<draggable
v-model="view.yaxis"
@ -696,10 +712,14 @@
class="padding-lr"
style="margin-top: 6px;"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span>{{ $t('chart.drag_block_value_axis_ext') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('yaxisExt')"
/>
</span>
<draggable
v-model="view.yaxisExt"
@ -741,10 +761,14 @@
class="padding-lr"
style="margin-top: 6px;"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span>{{ $t('chart.stack_item') }}</span>
/
<span>{{ $t('chart.dimension') }}</span>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('extStack')"
/>
</span>
<draggable
v-model="view.extStack"
@ -784,7 +808,7 @@
class="padding-lr"
style="margin-top: 6px;"
>
<span style="width: 80px;text-align: right;">
<span class="data-area-label">
<span>{{ $t('chart.bubble_size') }}</span>
/
<span>{{ $t('chart.quota') }}</span>
@ -801,6 +825,10 @@
style="cursor: pointer;color: #606266;"
/>
</el-tooltip>
<i
class="el-icon-arrow-down el-icon-delete data-area-clear"
@click="clearData('extBubble')"
/>
</span>
<draggable
v-model="view.extBubble"
@ -2554,7 +2582,7 @@ export default {
})
return
}
if (parseFloat(f.value).toString() === 'NaN') {
if (isNaN(f.value)) {
this.$message({
message: this.$t('chart.filter_value_can_not_str'),
type: 'error',
@ -2611,7 +2639,7 @@ export default {
return
}
if (this.filterItem.deType === 2 || this.filterItem.deType === 3) {
if (parseFloat(f.value).toString() === 'NaN') {
if (isNaN(f.value)) {
this.$message({
message: this.$t('chart.filter_value_can_not_str'),
type: 'error',
@ -3265,6 +3293,10 @@ export default {
})
}).catch(() => {
})
},
clearData(data) {
this.view[data] = []
this.calcData(true)
}
}
}
@ -3713,4 +3745,19 @@ span {
font-weight: 400 !important;
}
.data-area-label{
text-align: left;
position: relative;
width: 100%;
display: inline-block;
}
.data-area-clear{
position: absolute;
top: 4px;
right: 6px;
color: rgb(135, 141, 159);
cursor: pointer;
z-index: 1;
}
</style>