<template>
<div style="margin: 15px;">
<!-- 1.路径导航(面包屑) -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>数据管理字典</el-breadcrumb-item>
</el-breadcrumb>
<!-- 2.搜索栏-->
<el-form style="margin-top: 18px;" :inline="true">
<el-form-item label="类型">
<el-input v-model="dictType" placeholder="请输入字典类型"></el-input>
</el-form-item>
<el-form-item label="条目">
<el-input v-model="dictItem" placeholder="请输入字典条目"></el-input>
</el-form-item>
<el-form-item label="值">
<el-input v-model="dictValue" placeholder="请输入字典值"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="query(1)">查询</el-button>
<el-button type="success" icon="el-icon-plus" @click="open(null)">新增</el-button>
</el-form-item>
</el-form>
<!-- 3.数据表格-->
<el-table :data="tableData" style="width: 100%; margin-top: -15px;">
<el-table-column prop="dict_id" label="编号" width="180">
</el-table-column>
<el-table-column prop="dict_type" label="类别" width="180">
</el-table-column>
<el-table-column prop="dict_item" label="条目">
</el-table-column>
<el-table-column prop="dict_value" label="值">
</el-table-column>
<el-table-column prop="dict_is_editable" label="是否编辑">
<template slot-scope="scope">
<div v-if="scope.row.dict_is_editable==true">是</div>
<div v-else>否</div>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template slot-scope="scope" v-if="scope.
前端字典管理
最新推荐文章于 2024-07-07 05:00:00 发布
这篇博客介绍了如何在前端项目中集成Element-UI库,通过引入并配置Element-UI的CSS文件,实现了组件的使用。同时,文章详细讲解了安装和配置Axios的过程,包括使用vue-axios进行全局设置,以实现HTTP请求的管理。这些步骤对于提升前端开发效率和应用体验具有重要意义。
摘要由CSDN通过智能技术生成