及操作权限
⽬录
若依vue通过数据表反向⽣成代码，实现数据表的增删改查功能。但在实际开发中，经常需要在⼀个页⾯动态加载不同的表格（不同的表格表头和表格内容），这时候若依⽣成的固定的页⾯表格标题及内容已经不能满⾜需求，本⽂通过简单的修改达到若依vue页⾯动态加载表格的功能。 为了更好的和若依框架兼容，vue页⾯可以在若依框架⾃动⽣成的原始页⾯上进⾏修改。复制⼀份未做过修改的vue页⾯，作为动态页⾯，如dynamic/index.vue。
1、vue页⾯的实现
1.1 在⼯具栏增加显⽰/隐藏列操作按钮(带权限控制)
到页⾯上的right-toolbar标签，具体内容如下：
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
修改right-toolbar标签的内容如下，增加了:columns属性及v-hasPermi属性。樱花舞教学
queryTable="getList" 表⽰⼯具栏刷新按钮对应的操作是getList；
:columns="columns"表⽰显⽰/隐藏列可以操作的列，columns属性通过接⼝获取；
v-hasPermi="['coll:auth:query']表⽰具有coll:auth:query权限的⽤户可见并使⽤该操作⼯具栏，若该功能不希望加权限则去掉此项即可。
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" v-hasPermi="['coll:auth:query']"></right-toolbar>
若没有到页⾯上的right-toolbar标签，可以在页⾯搜索条件表单el-form结束标签后⾯换⾏添加如下内容：
<el-row :gutter="10" class="mb8">
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" v-hasPermi="['coll:auth:query']"></right-toolbar>
</el-row>
1.2 动态表格代码
到页⾯的表格标签el-table，完整删除<el-table>...</el-table>标签之前的所有内容，包括el-table标签⾃⾝。使⽤下⾯的代码放于原el-table标签的位置。
代码中第⼀⾏的dataList表⽰从接⼝查询的动态数据绑定与该表格。
template标签中的columns和right-toolbar中的columns涵义⼀致。
甘氨酸亚铁<el-table v-loading="loading" :data="dataList">
<el-table-column label="序号" type="index" min-width="5%" class-name="allowDrag" />
<template v-for='(col) in columns'>
<el-table-column
sortable
:show-overflow-tooltip="true"
:prop="col.prop"
:label="col.label"
:key="col.prop"
v-if="col.visible"
:min-width="col.width" >
</el-table-column>
</template>
</el-table>
1.3 在 export default 中设置表格数据及列的初始化信息
在export default的data中设置数据列表dataList和列信息columns，主要作⽤是初始化表格的对应数据(dataList和columns)。
dataList: []：初始化表格⾏数据为空。
columns：初始化列数据，其中key表⽰列的唯⼀索引，label表⽰在配置窗⼝中的显⽰名称，visible表⽰默认是否显⽰该列，true表⽰显⽰，false为不显⽰。
在methods中添加getList⽅法，⽤于查询表格列及数据信息。
response.tableDataInfo：表格⾏信息。
export default {
name: "apiconfigData",
data() {
return {
// 遮罩层
loading: true,
// 导出遮罩层
exportLoading: false,
// 显⽰搜索条件
showSearch: true,
//是否显⽰更多
isMore: "",
// 总条数
total: 0,
// 基础数据源列表
dataSourceList: [],
// 基础接⼝列表金鱼俱乐部
apiConfigList: [],
/
/ 接⼝类型列表
apiTypeOptions: [{dictValue:"1",dictLabel:'分页接⼝'},{dictValue:"2",dictLabel:'列表接⼝'},{dictValue:"3",dictLabel:'详情接⼝'}],
// 接⼝分类列表
apiCategoryCodeOptions: [],
// 接⼝数据列表
dataList: [],
// 表格列
columns: [
{ key: 0, label: `待查询`, visible: true }
],
// 是否显⽰弹出层
open: false,
// 是否显⽰弹出层
openDataSource: false,
// 是否显⽰弹出层
paramsOpen: false,
paramsOpen: false,
// 是否需要token字典
isTokenOptions: [],
// 状态字典
statusOptions: [],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
apiId: null,
apiCategoryCodeOptions: null,
apiType: null,
dsId: null,
status: "0",
},
// 表单参数
form: {}
};
},
created() {
const apiId = this.$route.params && this.$route.params.apiId;
//查询数据源
dataSourceOptionSelect().then(response => {
this.dataSourceList = response.data;
});
this.apiCategoryCodeOptions = response.data;
});
/
/根据选择的接⼝ID查询接⼝信息
getApiconfig(apiId).then(response => {
this.queryParams.dsId = response.data.dsId;
this.queryParams.apiCategoryCode = response.data.apiCategoryCode; this.queryParams.apiType = response.data.apiType;
});
},
methods: {
/** 查询基础接⼝配置列表 */
getApiConfigList(apiId) {
listApiconfig(this.queryParams).then(response => {
疟疾疫苗
this.apiConfigList = ws;
this.queryParams.apiId = apiId;
this.loading = false;
});
},
/** 改变接⼝查询条件 */
handleApiConditionChange() {
listApiconfig(this.queryParams).then(response => {
this.apiConfigList = ws;
ws.length<=0){
this.queryParams.apiId = 0;
}else{
this.queryParams.apiId = this.apiConfigList[0].apiId;
}
});
},
/** 测试接⼝ */
getList() {]
this.loading = true;
listData(this.queryParams).then(response => {
let columns = lumns;
if(columns != null){
}论文库
let tableDataInfo = response.tableDataInfo;
this.dataList = ws;
this.dataList = ws;
this.loading = false;
});
}
}
};
2、后台代码的实现
动态表格列配置对象需要和动态数据匹配，动态表格数据可以按需存储到数据库中（⽅便随时修改），也可以写于代码中。
/**
* 动态表格列配置对象
*
* @Author kongzi
* @Date 2021/11/4 9:48
* @Version 1.0
*/
public class TableColumn {
// 表格列索引，从0开始递增
private int key;
// 表格列属性名
private String prop;
// 表格列显⽰标签
private String label;
// 表格列是否显⽰标记，true显⽰
private boolean visible;
// 表格列显⽰宽度
private int width;
// getter、setter⽅法
}
2.2 动态表格数据对象
动态表格数据对象包装了列数据及⾏数据，是后端接⼝返回给前端页⾯的实际数据。
/**
* 动态表格数据
*
* @Author kongzi
* @Date 2021/11/4 9:55
* @Version 1.0
*/
public class TableData {
/
/ 表格列
List<TableColumn> columns;
// 表格数据
TableDataInfo tableDataInfo = new TableDataInfo();
public List<TableColumn> getColumns() {
return columns;
}
public void setColumns(List<TableColumn> columns) {
}
public TableDataInfo getTableDataInfo() {
return tableDataInfo;
}
}
2.3 查询接⼝
在controller中添加查询接⼝，返回类型为TableData。
@PreAuthorize("@ss.hasPermi('coll:auth:query')")
@GetMapping("/listData")
public TableData listData(ApiConfig config, SearchDto searchDto)
{
TableData tableData = new TableData();
TableDataInfo rspData = TableDataInfo();
ApiConfig apiConfig = ApiId());
if(apiConfig != null) {
List<TableColumn> columns = TableColumnList(apiConfig); tableData.setColumns(columns);
Object object = Result(apiConfig, searchDto);
if(object instanceof PageResult) {
PageResult result = (PageResult)object;
rspData.Data());
rspData.Code());
rspData.Total());
rspData.Msg());
} else if(object instanceof Result) {
Result result = (Result)object;
List list = new ArrayList();
list.Data());
rspData.setRows(list);
rspData.Code());
rspData.setTotal(1);
rspData.Msg());
}
} else {
rspData.setMsg("配置不存在");
}
return tableData;
刘国钧}
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议