优化列显示和隐藏的数据存储到浏览器本地缓存中

This commit is contained in:
wuyibo
2023-05-12 15:44:45 +08:00
parent dd94242a61
commit b10c3a8e4e
3 changed files with 88 additions and 26 deletions

View File

@@ -110,7 +110,7 @@
v-hasPermi="['${moduleName}:${businessName}:export']"
>导出</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" :pageName="$options.name" ></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="${businessName}List" @selection-change="handleSelectionChange">
@@ -124,21 +124,21 @@
#set($comment=$column.columnComment)
#end
#if($column.pk)
<el-table-column label="${comment}" align="center" prop="${javaField}" />
<el-table-column label="${comment}" align="center" prop="${javaField}" v-if="columns[$foreach.index].visible" show-overflow-tooltip />
#elseif($column.list && $column.htmlType == "datetime")
<el-table-column label="${comment}" align="center" prop="${javaField}" width="180">
<el-table-column label="${comment}" align="center" prop="${javaField}" width="180" v-if="columns[$foreach.index].visible" show-overflow-tooltip >
<template slot-scope="scope">
<span>{{ parseTime(scope.row.${javaField}, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
#elseif($column.list && $column.htmlType == "imageUpload")
<el-table-column label="${comment}" align="center" prop="${javaField}" width="100">
<el-table-column label="${comment}" align="center" prop="${javaField}" width="100" v-if="columns[$foreach.index].visible" show-overflow-tooltip >
<template slot-scope="scope">
<image-preview :src="scope.row.${javaField}" :width="50" :height="50"/>
</template>
</el-table-column>
#elseif($column.list && "" != $column.dictType)
<el-table-column label="${comment}" align="center" prop="${javaField}">
<el-table-column label="${comment}" align="center" prop="${javaField}" v-if="columns[$foreach.index].visible" show-overflow-tooltip >
<template slot-scope="scope">
#if($column.htmlType == "checkbox")
<dict-tag :options="dict.type.${column.dictType}" :value="scope.row.${javaField} ? scope.row.${javaField}.split(',') : []"/>
@@ -148,7 +148,7 @@
</template>
</el-table-column>
#elseif($column.list && "" != $javaField)
<el-table-column label="${comment}" align="center" prop="${javaField}" />
<el-table-column label="${comment}" align="center" prop="${javaField}" v-if="columns[$foreach.index].visible" show-overflow-tooltip />
#end
#end
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
@@ -416,11 +416,22 @@ export default {
]#if($foreach.count != $columns.size()),#end
#end
#end
}
},
// 列表的列的显示隐藏设置
columns:[
#foreach ($column in $columns)
{ key: $foreach.index, label: `$column.columnComment`, visible: true },
#end
],
};
},
created() {
this.getList();
//列表分页列的动态显示配置
var columns = JSON.parse(localStorage.getItem(this.$options.name));
if(columns){
this.columns = columns;
}
},
methods: {
/** 查询${functionName}列表 */