一、初始化页面

• Code

<template>
<basic-container><avue-crud:table-loading="loading":data="tableData":option="option"v-model="form":page.sync="page"@row-del="rowDel"@search-change="searchChange"@selection-change="selectionChange"@search-reset="searchReset"ref="crud"@on-load="onLoad"@current-change="currentChange"@size-change="sizeChange"@refresh-change="refreshChange":permission="permissionList"><template slot="menuLeft"><!-- 左菜单左上角-新增 --><el-buttontype="primary"icon="el-icon-plus"size="small"@click="rowAdd">新 增</el-button><!-- 左菜单左上角-删除 --><el-buttontype="danger"size="small"icon="el-icon-delete"plain@click="handleBtn('delete')">删 除</el-button><el-buttontype="default"size="small"plain@click="handleBtn('enable')">启 用</el-button><el-buttontype="default"size="small"plain@click="handleBtn('disable')">停 用</el-button></template><!-- 导航类型 --><template slot-scope="{ row }" slot="navigationType">{{ navigationTypeData(row) }}</template><template slot-scope="{ row }" slot="menu"><el-button type="text" size="small" @click="rowEdit(row)">编辑</el-button><el-button type="text" size="small" @click="rowDel(row)">删除</el-button></template><!-- 显隐列设置 --><template slot="menuRight"><showHidden:column.sync="option.column"moduleType="TASK":constData.sync="constOptionData"></showHidden></template></avue-crud></template><script>
import { startMapAction } from '@/views/base/map/http/request';
import detailForm from '@/components/detail-form/index.vue';
import { getStore } from '@/utils/store';
import showHidden from '@/components/table-implicit/index.vue';
// 初始化默认要显示的列，供列显隐中的恢复默认使用
let customConstant = ['code','name','priority','isOnLoad',
];
export default {
components: {detailForm,showHidden,},data() {return {// 后台端口出现// （1）改成total: 0,// （2）onload(){}相关total内容改的打开page: {pageSize: 10,currentPage: 1,total: 0,},loading: false,// 表格绑定的内容form: {},// 搜索框查询的内容query: {},search: {},//选中行的数据selectionList: [],// 默认显示哪些列constOptionData: [],// 列表数据tableData: [],// 新增弹窗addDrawer: false,// 编辑弹窗editDrawer: false,};},created() {//newlet column = localStorage.getItem(this.$route.path);if (column) {this.option.column = JSON.parse(column);console.log(this.option);}// 显隐列this.constOptionData = customConstant;if (getStore({ name: 'TASK' })) {let data = getStore({ name: 'TASK' });data.forEach((item) => {this.option.column.forEach((chileItem) => {if (item.prop === chileItem.prop) {chileItem.hide = item.hide;}});});}},methods: {// 加载onLoad(page, params = {}) {this.loading = true;chargeStationPage(page.currentPage,page.pageSize,Object.assign(params, this.query) // 第三个参数：data).then((res) => {this.page.total = res.data.total;console.log('列表被打印啦：', res);this.tableData = res.data.records;this.loading = false;});},/* 方法 ------------------------------------------------------------------------- */// 搜索按钮searchChange(params, done) {// this.query = Object.assign(params, this.search);this.query = params;this.page.currentPage = 1;this.onLoad(this.page, this.query);done();},// 分页页码改变时currentChange(currentPage) {this.page.currentPage = currentPage;},// 页面个数改变时sizeChange(pageSize) {this.page.pageSize = pageSize;},refreshChange() {this.onLoad(this.page, this.query);},// 重置按钮searchReset() {this.query = {};this.search = {};this.onLoad(this.page);},//行选中selectionChange(list) {this.selectionList = list;},},
};
</script><style scoped></style>

1. 有 avue ，js 补 option

• JS

 return {option: {menu: true,selection: true,tip: false,searchLabelWidth: 90,labelWidth: 120,// align: 'left',//按钮位置menuAlign: 'center',menuWidth: '160',grid: false,//搜索 按钮位置searchMenuPosition: 'right',searchMenuSpan: 6,border: true,viewBtn: false,copyBtn: false,//新增按钮addBtn: false,editBtn: false,delBtn: false,editBtnIcon: ' ',delBtnIcon: ' ',updateBtnIcon: ' ',cancelBtnIcon: ' ',// searchBtnIcon: ' ',// emptyBtnIcon: ' ',saveBtn: false,// updateBtn: false,cancelBtn: false,dialogWidth: 600,// span: 10,reserveSelection: true,columnBtn: false,// 按钮上字改变:searchBtnText: '查询'searchBtnText: '查询',emptyBtnText: '重置',column: [{label: '编号',prop: 'code',width: 120,span: 20,labelWidth: '180',align: 'center',row: true,hide: false,showColumn: true,search: false,// 禁用disabled: true,slot: true,sortable: true,},//↓搜索 -不在列表显示{label: '地图名称',prop: 'codeOrName',search: true,searchLabel: '地图',searchPlaceholder: '请输入名称',searchSpan: 6, //调整 框 的长度// width: 130,// span: 8,showColumn: true,slot: true,sortable: true,minWidth: '100',},//↑{label: '名称',prop: 'name',width: 120,span: 20,labelWidth: '180',row: true,hide: false,showColumn: true,align: 'center',search: false,slot: true,sortable: true,},//↓搜索 1。在列表显示 2。下拉框 后端获取数据 {label: '类型',prop: 'type',// width: 130,span: 20,labelWidth: '180',row: true,hide: false,showColumn: true,align: 'center',search: true,slot: true,sortable: true,type: 'select',dicUrl: '/api/dict/list?code=charge_station',props: {label: 'label',//前端显示的值value: 'value',//传给后端的值},},//↑{label: '优先级',prop: 'priority',width: 100,span: 20,labelWidth: '180',row: true,hide: false,showColumn: true,align: 'center',search: false,slot: true,sortable: true,},{