10. CMDB前端开发-IDC管理
10. CMDB前端开发-IDC管理
CMDB前端开发-IDC管理
IDC管理
- 首先需要将布局做一下调整， 目录结构如下
- 删除原先的A~C.vue文件，修改router/index.js 路由文件如下：
...
const routes = [
{
path: '/login',
name: '登录',
component: () => import('../views/Login.vue')
},
{
path: '/',
name: '首页',
component: Layout,
redirect: '/dashboard',
children: [
{
path: '/dashboard',
name: '仪表盘',
icon: 'Monitor',
component: () => import('../views/dashboard/Dashboard.vue')
}
]
},
{
path: '/server',
name: '主机管理',
icon: 'Setting',
component: Layout,
children: [
{
path: '/idc',
name: '机房管理',
component: () => import('../views/idc/Idc')
},
{
path: '/server_group',
name: '主机分组',
component: () => import('../views/servergroup/ServerGroup')
},
{
path: '/server',
name: '服务器管理',
component: () => import('../views/server/Server')
},
]
},
{
path: '/sysconfig',
name: '系统配置',
icon: 'PieChart',
component: Layout,
children: [
{
path: '/credential',
name: '凭据管理',
component: () => import('../views/credential/Credential')
}
]
}
]
...IDC列表雏形
- 启动cmdb后端
- 根据card， table文档实现初步布局： views/idc/Idc.vue
<template>
<el-card class="box-card">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="机房名称" width="180" />
<el-table-column prop="city" label="所在城市" width="180" />
<el-table-column prop="provider" label="提供商" />
<el-table-column prop="note" label="备注" />
<el-table-column prop="create_time" label="创建时间" />
<el-table-column flexd="right" label="操作栏" width="120px">
<template #default>
<el-button link type="primary" size="small" @click="EditIdc">编辑</el-button>
<el-button link type="primary" size="small" @click="DeleteIdc">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
</template>
<script>
export default {
name: "Idc",
data() {
return {
tableData: ''
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/')
.then(res => {
this.tableData = res.data.data
})
}
},
mounted() {
this.getData()
}
}
</script>
<style scoped>
</style>- 登录之后初步效果展示如下
添加IDC列表分页
- 确认后端需要具备分页能力
- 调整idc视图，配置分页相关内容: views/idc/Idc.vue
<template>
<el-card class="box-card">
<el-table
:data="tableData"
border="1px"
style="width: 100%"
>
<el-table-column prop="name" label="机房名称" width="180" />
<el-table-column prop="city" label="所在城市" width="180" />
<el-table-column prop="provider" label="提供商" />
<el-table-column prop="note" label="备注" />
<el-table-column prop="create_time" label="创建时间" />
<el-table-column flexd="right" label="操作栏" width="150px">
<template #default>
<el-button type="primary" size="small" @click="EditIdc">编辑</el-button>
<el-button type="danger" size="small" @click="DeleteIdc">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style="margin-top: 20px">
<el-pagination
v-model:currentPage="currentPage"
:page-sizes="[10, 15, 20, 25, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
export default {
name: "Idc",
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3
}
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;
})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
}
},
mounted() {
this.getData()
}
}
</script>
<style scoped>
</style>- 前端效果展示
- 后端效果展示
IDC信息编辑
- 使用子组件IdcEdit.vue方式来简化Idc.vue 的代码量
- 新增子组件， 并配置好数据校验等： views/idc/IdcEdit.vue
<template>
<!--操作栏：编辑对话框-->
<el-dialog
:model-value="visible"
width="30%"
title="修改机房信息"
@close="dialogClose"
>
<el-form :model="row" ref="formRef" :rules="formRules" label-position="right" label-width="100px">
<el-form-item label="机房名称：" prop="name">
<el-input v-model="row.name"></el-input>
</el-form-item>
<el-form-item label="城市：" prop="city">
<el-input v-model="row.city"></el-input>
</el-form-item>
<el-form-item label="运营商：" prop="provider">
<el-input v-model="row.provider"></el-input>
</el-form-item>
<el-form-item label="备注：">
<el-input v-model="row.note" type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogClose">取消</el-button>
<el-button type="primary" @click="submit">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
export default {
name: "IdcEdit",
props: {
visible: Boolean,
row: '', //父组件传递过来的当前行数据
},
data() {
return {
//校验规则
formRules: {
name: [
{required: true, message: '请输入机房名称', trigger: 'blur'},
{min: 2, message: '机房名称长度应不小于2个字符', trigger: 'blur'}
],
city: [
{required: true, message: '请输入城市', trigger: 'blur'},
{min: 2, message: '城市长度应不小于2个字符', trigger: 'blur'}
],
provider: [
{required: true, message: '请输入运营商', trigger: 'blur'},
{min: 2, message: '运营商长度应不小于2个字符', trigger: 'blur'}
]
}
}
},
methods: {
//提交更新
submit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$http.put('/cmdb/idc/' + this.row.id + '/', this.row)
.then(res => {
if (res.data.code == 200){
this.$message.success(res.data.msg);
this.$parent.getData(); // 调用父组件方法，更新数据
this.dialogClose() // 关闭窗口
}
})
} else {
this.$message.error('格式错误！')
}
})
},
//关闭对话框，需要emit父组件关闭对话框
dialogClose() {
this.$emit('update:visible', false)
}
}
}
</script>
<style scoped>
</style>- 需要修改idc后端视图： devops_api/cmdb/views.py
...
class IdcViewSet(ModelViewSet):
queryset = Idc.objects.all()
serializer_class = IdcSerializers
filter_backends = [filters.SearchFilter,filters.OrderingFilter,DjangoFilterBackend]
search_fields = ("name",)
filterset_fields = ("city",)
ordering_fields = ("id",)
#重写更新方法
def update(self, request, *args, **kwargs):
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
#res = {'code': 500, 'msg': '主机配置信息同步失败，错误信息： %s' % result['msg']}
res = {'code':200, 'msg': '修改成功'}
return Response(res)
...- 修改前端Idc.vue, 实现父组件引用子组件： views/idc/Idc.vue
<template>
<el-card class="box-card">
<el-table
:data="tableData"
border="1px"
style="width: 100%"
>
<el-table-column prop="name" label="机房名称" width="180" />
<el-table-column prop="city" label="所在城市" width="180" />
<el-table-column prop="provider" label="提供商" />
<el-table-column prop="note" label="备注" />
<el-table-column prop="create_time" label="创建时间" />
<el-table-column flexd="right" label="操作栏" width="150px">
<template #default="scope">
<el-button type="primary" size="small" @click="EditIdc(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="DeleteIdc=(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style="margin-top: 20px">
<el-pagination
v-model:currentPage="currentPage"
:page-sizes="[10, 15, 20, 25, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</el-card>
<!-- idc编辑-->
<IdcEdit v-model:visible="editDialogVisible" :row="currentRow"></IdcEdit>
</template>
<script>
import IdcEdit from "@/views/idc/IdcEdit";
export default {
name: "Idc",
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3
},
currentRow: '',
editDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;
})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index) {}
},
mounted() {
this.getData()
},
components: {
IdcEdit
}
}
</script>
<style scoped>
</style>- 效果展示
IDC 信息删除
- idc后端视图调整： devops_api/cmdb/views.py
class IdcViewSet(ModelViewSet):
queryset = Idc.objects.all()
serializer_class = IdcSerializers
filter_backends = [filters.SearchFilter,filters.OrderingFilter,DjangoFilterBackend]
search_fields = ("name",)
filterset_fields = ("city",)
ordering_fields = ("id",)
#重写更新方法
def update(self, request, *args, **kwargs):
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
#res = {'code': 500, 'msg': '主机配置信息同步失败，错误信息： %s' % result['msg']}
res = {'code':200, 'msg': '修改成功'}
return Response(res)
#重写删除方法
def destroy(self, request, *args, **kwargs):
instance = self.get_object()
try:
self.perform_destroy(instance)
res = {'code': 200, 'msg': '删除成功'}
except Exception as e:
res = {'code': 500, 'msg': '机房存在关联信息，删除之后再操作'}
return Response(res)- 前端删除配置
<template>
<el-card class="box-card">
<el-table
:data="tableData"
border="1px"
style="width: 100%"
>
<el-table-column prop="name" label="机房名称" width="180" />
<el-table-column prop="city" label="所在城市" width="180" />
<el-table-column prop="provider" label="提供商" />
<el-table-column prop="note" label="备注" />
<el-table-column prop="create_time" label="创建时间" />
<el-table-column flexd="right" label="操作栏" width="150px">
<template #default="scope">
<el-button type="primary" size="small" @click="EditIdc(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="DeleteIdc(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页-->
<div style="margin-top: 20px">
<el-pagination
v-model:currentPage="currentPage"
:page-sizes="[10, 15, 20, 25, 30]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
</el-card>
<!-- idc编辑-->
<IdcEdit v-model:visible="editDialogVisible" :row="currentRow"></IdcEdit>
</template>
<script>
import IdcEdit from "@/views/idc/IdcEdit";
export default {
name: "Idc",
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3
},
currentRow: '',
editDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;
})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index,row) {
this.$confirm("你确定要删除选中的吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => { // 点击确定
this.$http.delete('/cmdb/idc/'+ row.id + '/')
.then(res => {
if(res.data.code === 200) {
this.$message.success(res.data.msg);
this.tableData.splice(index, 1); // 根据表格索引临时删除数据
}
});
})
}
},
mounted() {
this.getData()
},
components: {
IdcEdit
}
}
</script>
<style scoped>
</style>- 效果展示
搜索功能
- 在前端views/idc/Idc.vue进行配置
<template>
<el-card class="box-card">
<div class="tools">
<!-- 搜索框-->
<div class="tools-left">
<el-input
v-model="urlParams.search"
placeholder="请输入关键字"
@keyup.enter="onSearch"
clearable
@clear="onSearch"
class="search"
/>
<el-button type="primary" @click="onSearch"><el-icon><search /></el-icon> 搜索</el-button>
</div>
<div class="tools-right">
<el-button type="primary" @click="onSearch"><el-icon><search /></el-icon> 创建</el-button>
<el-button type="primary" @click="onSearch"><el-icon><search /></el-icon> 展示列</el-button>
</div>
</div>
...
</template>
<script>
import IdcEdit from "@/views/idc/IdcEdit";
export default {
name: "Idc",
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3,
search: ''
},
currentRow: '',
editDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;
})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index,row) {
this.$confirm("你确定要删除选中的吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => { // 点击确定
this.$http.delete('/cmdb/idc/'+ row.id + '/')
.then(res => {
if(res.data.code === 200) {
this.$message.success(res.data.msg);
this.tableData.splice(index, 1); // 根据表格索引临时删除数据
}
});
})
},
onSearch() {
this.getData()
}
},
mounted() {
this.getData()
},
components: {
IdcEdit
}
}
</script>
<style scoped>
.tools {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.tools-left {
display: flex;
}
.tools-right {
display: flex;
}
.search {
width: 150px;
margin-right: 10px;
}
</style>- 效果展示
新建idc数据
- 修改后端代码，新建视图调整： devops_api/cmdb/views.py
...
class IdcViewSet(ModelViewSet):
queryset = Idc.objects.all()
serializer_class = IdcSerializers
filter_backends = [filters.SearchFilter,filters.OrderingFilter,DjangoFilterBackend]
search_fields = ("name",)
filterset_fields = ("city",)
ordering_fields = ("id",)
#重写更新方法
def update(self, request, *args, **kwargs):
partial = kwargs.pop('partial', False)
instance = self.get_object()
serializer = self.get_serializer(instance, data=request.data, partial=partial)
serializer.is_valid(raise_exception=True)
self.perform_update(serializer)
#res = {'code': 500, 'msg': '主机配置信息同步失败，错误信息： %s' % result['msg']}
res = {'code':200, 'msg': '修改成功'}
return Response(res)
#重写删除方法
def destroy(self, request, *args, **kwargs):
instance = self.get_object()
try:
self.perform_destroy(instance)
res = {'code': 200, 'msg': '删除成功'}
except Exception as e:
res = {'code': 500, 'msg': '机房存在关联信息，删除之后再操作'}
return Response(res)
#重写创建方法
def create(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
try:
self.perform_create(serializer)
res = {'code': 200, 'msg': '创建idc成功'}
except Exception as e:
res = {'code': 500, 'msg': '创建idc失败%s'%e}
return Response(res)
...- 前端创建idc子组件： views/idc/IdcCreate.vue
<template>
<el-dialog
:model-value="visible"
width="30%"
title="创建机房"
@close="dialogClose"
>
<el-form :model="form" ref="formRef" :rules="formRules" label-position="right" label-width="100px" >
<el-form-item label="机房名称：" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="城市：" prop="city">
<el-input v-model="form.city"></el-input>
</el-form-item>
<el-form-item label="运营商：" prop="provider">
<el-input v-model="form.provider"></el-input>
</el-form-item>
<el-form-item label="备注：">
<el-input v-model="form.note" type="textarea"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogClose">取消</el-button>
<el-button type="primary" @click="submit">确定</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
export default {
name: "IdcCreate",
props: {
visible: Boolean,
},
data() {
return {
form: {
'name': '',
'city': '',
'provider': '',
'note': ''
},
formRules: {
name: [
{required: true, message: '请输入机房名称', trigger: 'blur'},
{min: 2, message: '机房名称长度应不小于2个字符', trigger: 'blur'}
],
city: [
{required: true, message: '请输入城市', trigger: 'blur'},
{min: 2, message: '城市长度应不小于2个字符', trigger: 'blur'}
],
provider: [
{required: true, message: '请输入运营商', trigger: 'blur'},
{min: 2, message: '运营商长度应不小于2个字符', trigger: 'blur'}
]
},
}
},
methods: {
submit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
this.$http.post('/cmdb/idc/', this.form)
.then(res => {
if (res.data.code === 200){
this.$message.success(res.data.msg);
this.$parent.getData(); // 调用父组件方法，更新数据
this.dialogClose() // 关闭窗口
}
})
} else {
this.$message.error('格式错误！')
}
})
},
// 点击关闭，子组件通知父组件更新属性
dialogClose() {
this.$emit('update:visible', false) // 父组件必须使用v-model
}
}
}
</script>
<style scoped>
</style>- 父组件引用： views/idc/Idc.vue
<template>
<el-card class="box-card">
<div class="tools">
<!-- 搜索框-->
<div class="tools-left">
<el-input
v-model="urlParams.search"
placeholder="请输入关键字"
@keyup.enter="onSearch"
clearable
@clear="onSearch"
class="search"
/>
<el-button type="primary" @click="onSearch"><el-icon><search /></el-icon> 搜索</el-button>
</div>
<div class="tools-right">
<el-button type="primary" @click="createDialogVisible=true"><el-icon><Plus /></el-icon> 创建</el-button>
<el-button type="primary" @click="onSearch"><el-icon><Setting /></el-icon> 展示列</el-button>
</div>
</div>
...
<!-- idc编辑-->
<IdcEdit v-model:visible="editDialogVisible" :row="currentRow"></IdcEdit>
<!-- idc创建-->
<IdcCreate v-model:visible="createDialogVisible"></IdcCreate>
</template>
<script>
import IdcEdit from "@/views/idc/IdcEdit";
import IdcCreate from "@/views/idc/IdcCreate";
export default {
name: "Idc",
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3,
search: ''
},
currentRow: '',
editDialogVisible: false,
createDialogVisible: false
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;
})
},
//监听每页数量的事件
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.urlParams.page_size = pageSize;
this.getData()
},
//监听页码变动的事件
handleCurrentChange(currentPage) {
this.currentPage = currentPage; // 重新设置分页显示
this.urlParams.page_num = currentPage;
this.getData()
},
EditIdc(index,row) {
this.editDialogVisible = true;
this.currentRow = row; //将当前行内容传递到子组件
},
DeleteIdc(index,row) {
this.$confirm("你确定要删除选中的吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => { // 点击确定
this.$http.delete('/cmdb/idc/'+ row.id + '/')
.then(res => {
if(res.data.code === 200) {
this.$message.success(res.data.msg);
this.tableData.splice(index, 1); // 根据表格索引临时删除数据
}
});
})
},
onSearch() {
this.getData()
}
},
mounted() {
this.getData()
},
components: {
IdcEdit,
IdcCreate
}
}
</script>
...- 效果展示
展示列功能开发
- 展示列配置
<template>
<el-card class="box-card">
<div class="tools">
<!-- 搜索框-->
<div class="tools-left">
<el-input
v-model="urlParams.search"
placeholder="请输入关键字"
@keyup.enter="onSearch"
clearable
@clear="onSearch"
class="search"
/>
<el-button type="primary" @click="onSearch"><el-icon><search /></el-icon> 搜索</el-button>
</div>
<div class="tools-right">
<el-button type="primary" @click="createDialogVisible=true"><el-icon><Plus /></el-icon> 创建</el-button>
<!--展示列弹出框-->
<el-popover placement="left" :width="100" v-model:visible="columnVisible">
<template #reference>
<el-button type="primary" @click="columnVisible=true"><el-icon><setting /></el-icon> 展示列</el-button>
</template>
<el-checkbox v-model="showColumn.name" disabled>机房名称</el-checkbox>
<el-checkbox v-model="showColumn.city">城市</el-checkbox>
<el-checkbox v-model="showColumn.provider">运营商</el-checkbox>
<el-checkbox v-model="showColumn.note">备注</el-checkbox>
<el-checkbox v-model="showColumn.create_time">创建时间</el-checkbox>
<!-- 新增选择内容持久化配置-->
<div style="text-align: right; margin: 0">
<el-button size="small" type="text" @click="columnVisible = false">取消</el-button>
<el-button size="small" type="primary" @click="saveColumn">确认</el-button>
</div>
</el-popover>
</div>
</div>
<el-table
:data="tableData"
border="1px"
style="width: 100%"
>
<el-table-column prop="name" label="机房名称"/>
<el-table-column prop="city" label="所在城市" v-if="showColumn.city"/>
<el-table-column prop="provider" label="提供商" v-if="showColumn.provider"/>
<el-table-column prop="note" label="备注" v-if="showColumn.note" />
<el-table-column prop="create_time" label="创建时间" v-if="showColumn.create_time"/>
<el-table-column flexd label="操作栏" width="150px">
<template #default="scope">
<el-button type="primary" size="small" @click="EditIdc(scope.$index,scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="DeleteIdc(scope.$index,scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
...
</template>
<script>
import IdcEdit from "@/views/idc/IdcEdit";
import IdcCreate from "@/views/idc/IdcCreate";
export default {
name: "Idc",
data() {
return {
tableData: '',
currentPage: 1, //默认第一页
pageSize: 3, //默认每页10条
total: 0, //总条数
urlParams: {
page_num: 1,
page_size: 3,
search: ''
},
currentRow: '',
editDialogVisible: false,
createDialogVisible: false,
columnVisible: false, // 可展示列显示与隐藏
showColumn: {
name: true,
city: true,
provider: true,
note: true,
create_time: true
}
}
},
methods: {
getData() {
this.$http.get('cmdb/idc/', {params: this.urlParams})
.then(res => {
this.tableData = res.data.data;
this.total = res.data.count;
})
},
...
saveColumn() {
// 将可显示的字段存储到浏览器本地存储
localStorage.setItem(this.$route.path + '-columnSet', JSON.stringify(this.showColumn));
this.columnVisible = false;
}
},
mounted() {
this.getData()
const columnSet = localStorage.getItem(this.$route.path + '-columnSet');
if(columnSet) {
this.showColumn = JSON.parse(columnSet)
}
},
components: {
IdcEdit,
IdcCreate
}
}
</script>- 效果展示
- 刷新之后数据展示
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-05-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云服务器
云服务器（Cloud Virtual Machine，CVM）提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源，适应变化的业务需求，并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本，简化 IT 运维工作。
腾讯云开发者
