前端学习（2476）：表单数据绑定处理
2024-04-09 16:58:06
request.js
<template>
<div class="artical-container"><!--卡片--><el-card class="filter-card"><div slot="header" class="clearfix"><!--面包屑导航--><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></div><!--数据--><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="状态"><el-radio-group v-model="status"><el-radio :label="null">全部</el-radio><el-radio :label="0">草稿</el-radio><el-radio :label="1">待审核</el-radio><el-radio :label="2">审核通过</el-radio><el-radio :label="3">审核失败</el-radio><el-radio :label="4">已删除</el-radio></el-radio-group></el-form-item><el-form-item label="频道"><el-select v-model="channelId" placeholder="请选择频道"><el-option label="全部" :value="null"></el-option><el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="rangeDate"type="datetimerange"placeholder="选择日期时间"align="right"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-item><el-button type="primary" :disabled="loading" @click="loadArticals(1)">查询</el-button></el-form-item></el-form></el-card><el-card class="filter-card"><div slot="header" class="clearfix">根据筛选条件有{{totalCount}}条结果</div><!--数据列表--><el-table:data="articals"style="width: 100%" stripe size="mini" ><el-table-columnprop="date"label="封面"v-loading="loading"><template slot-scope="scope"><img v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]" class="artical-cover" alt=""><img v-else class="artical-cover" src="./pic_bg.png" alt=""></template></el-table-column><el-table-columnprop="title"label="标题"></el-table-column><el-table-columnprop="status"label="状态"><!--如果需要自定义遍历当前数据--><template slot-scope="scope"><el-tag :type="articalsStatus[scope.row.status].type">{{articalsStatus[scope.row.status].text}}</el-tag><!-- <el-tag v-else-if="scope.row.status===1">待审核</el-tag><el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag><el-tag v-else-if="scope.row.status===3" type="danger">审核失败</el-tag><el-tag v-else-if="scope.row.status===4" type="info">已删除</el-tag>--></template></el-table-column><el-table-columnprop="pubdate"label="发布时间"></el-table-column><el-table-columnprop="cover"label="操作"><template slot-scope="scope"><el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button><el-button size="mini" icon="el-icon-delete" type="danger" @click="onDeleteArtical(scope.row.id)" circle></el-button></template></el-table-column></el-table><!--分页--><el-pagination class="list-table"layout="prev, pager, next":total="totalCount" :page-size="pageSize":disabled="loading"@current-change="OnCurrentChange" ></el-pagination></el-card></div>
</template>
<script>
import {getArtical,deleteArtical,getArticalChannels
} from '@/api/artical'export default {name: 'ArticalIndex',created () {this.loadArticals(1)this.loadChannels()},data () {return {loading: true,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},status: null, // 状态为空 查询文章的状态totalCount: 0, // 初始数据pageSize: 20, // 每页大小articals: [], // 记录文章的数据channels: [],channelId: null, // 文章的频道rangeDate: null, // 日期数据articalsStatus: [{ status: 0, text: '草稿', type: 'info' },{ status: 1, text: '待审核', type: '' },{ status: 2, text: '审核通过', type: 'success' },{ status: 3, text: '审核失败', type: 'warning' },{ status: 4, text: '已删除', type: 'danger' }]}},methods: {// 文章删除onDeleteArtical (articleId) {this.$confirm('确认删除吗', '删除提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {/* 要删除的文章id */deleteArtical(articleId.toString()).then(res => {console.log(res)})}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},onSubmit () {console.log('submit!')},loadArticals (page = 1) {this.loading = truegetArtical({page,per_page: this.pageSize,status: this.status,channel_id: this.channelId,/** */begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,end_pubdate: this.rangeDate ? this.rangeDate[1] : null}).then(res => {const { results, total_count: totalCount } = res.data.datathis.totalCount = totalCountthis.articals = results// 关闭加载this.loading = false})},loadChannels () {getArticalChannels().then(res => {console.log(res)this.channels = res.data.data.channels})},OnCurrentChange (page) {this.loadArticals(page)}}
}</script>
<style scope lang="less">
.filter-card{margin-bottom: 30px;
}
.list-table{margin-bottom: 20px;
}
.artical-cover{width: 60px;background-size:cover;
}
</style>
app.vue
<template><div id="app"><router-view/></div>
</template>
<script>
export default {name: 'App'
}
</script>
<style lang="less"></style>
index.vue
<template><div class="login-container"><!--必须用el-form进行包裹--><div class="login-head"></div><!--配置表单验证//必须为表单提供验证对象2添加prop属性3通过el-form组件库里面的rules--><el-form class="login-form" ref="login-form" :model="user" :rules="formRules"><el-form-item prop="mobile"><el-input v-model="user.mobile" placeholder="请输入手机号"></el-input></el-form-item><el-form-item prop="code"><el-input v-model="user.code" placeholder="请输入验证码"></el-input></el-form-item><el-form-item prop="agree"><el-checkbox v-model="checked">我已阅读并同意用户协议和隐私条款</el-checkbox></el-form-item><el-form-item><el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录</el-button></el-form-item></el-form></div>
</template><script>import { login } from '@/api/user'
export default {name: 'LoginIndex',components: {},props: {},data () {return {user: {mobile: '', // 手机号code: '', // 验证码agree: false// 是否同意协议},loginLoading: false, // 登录的loding状态/* checked: false, // 是否同意协议 */formRules: {mobile: [{required: true,message: '手机号不能为空',trigger: 'change'},{ pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }],code: [{required: true,message: '验证码不能为空',trigger: 'change'},{ pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }],agree: [{// 调用validator: (rule, value, callback) => {if (value) {callback()} else {callback(new Error('请同意用户协议'))}},trigger: 'change'}]}}},methods: {onLogin () {// 获取表单数据// const user = this.user// 触发表单验证 validate是异步this.$refs['login-form'].validate((valid, err) => {console.log(valid)console.log(err)// 如果if (!valid) {return}this.login()})},login () {// 开启loadingthis.loginLoading = true// 验证通过// 请求直接封装login(this.user).then(res => {console.log(res)this.$message({message: '登录成功',type: 'success'})this.loginLoading = false}).catch(err => {console.log('登录失败', err)this.$message.error({message: '手机号或者验证码错误',type: 'warning'})this.loginLoading = false})}}}
</script>
<style scoped lang="less">
.login-container{
position: fixed;left: 0;top: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;flex-direction: column;background: url("./login_bg.jpg") no-repeat;background-size: cover;.login-head{width: 300px;height: 57px;background:url("./logo_index.png") no-repeat;margin-bottom: 30px;}.login-form{background-color: #fff;padding: 50px;min-width: 300px;.login-btn{width: 100%;}}
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './styles/index.less'
// 加载组件库
import ElementUI from 'element-ui'
// 加载样式
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// 注册组件库
Vue.use(ElementUI)
new Vue({router,render: h => h(App)
}).$mount('#app')
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login/index'
Vue.use(VueRouter)// 路由配置表
const routes = [{path: '/login',name: 'login',component: Login
}]
const router = new VueRouter({routes
})export default router
user.js
// 用户登录的请求模块
import request from '@/utils/request'export const login = data => {return request({method: 'POST',url: '/mp/v1_0/authorizations',data})
}// 获取用户信息
index.vue
<template><div class="home-container">首页</div>
</template>
<script>
export default {name: 'HomeIndex',data () {return {}}
}
</script>
<style scoped lang="less"></style>
index.vue
<template><el-container class="layout-container"><el-aside class="aside"><app-aside class="aside-menu"></app-aside></el-aside><el-container><el-header class="header"><div><i class="el-icon-s-fold"></i><span>江苏传智播客科技教育有限公司</span></div><el-dropdown><div class="avatar-wrap"><img class="avatar" src="./avatar.jpg" alt=""><span>歌谣</span><i class="el-icon-arrow-down el-icon--right"></i></div><!--<span>下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></span>--><el-dropdown-menu slot="dropdown"><el-dropdown-item>设置</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main class="main"><router-view /></el-main></el-container></el-container></template>
<script>
import AppAside from './component/aside'export default {name: 'LayoutIndex',components: { AppAside },component: {AppAside},data () {return {}}
}
</script>
<style scoped lang="less">
.layout-container{position: fixed;left:0;right:0;top:0;bottom: 0;}.aside{width: 100px;background-color: #d3dce6;.aside-menu{height: 100%;}
}
.header{height: 60px;background-color: #b3c0d1;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;
}
.main{background-color: #e9eef3;
}
.avatar-wrap{display: flex;align-items: center;.avatar{width: 40px;height: 40px;border-radius: 50%;margin-right: 10px;}
}
</style>
aside.vue
<template>
<div class="artical-container"><!--卡片--><el-card class="filter-card"><div slot="header" class="clearfix"><!--面包屑导航--><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></div><!--数据--><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="状态"><el-radio-group v-model="form.resource"><el-radio label="全部"></el-radio><el-radio label="查找"></el-radio><el-radio label="待审核"></el-radio><el-radio label="审核通过"></el-radio><el-radio label="审核失败"></el-radio><el-radio label="已删除"></el-radio></el-radio-group></el-form-item><el-form-item label="频道"><el-select v-model="form.region" placeholder="请选择频道"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="form.date1"type="datetime"placeholder="选择日期时间"align="right"></el-date-picker></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">查询</el-button></el-form-item></el-form></el-card><el-card class="filter-card"><div slot="header" class="clearfix">根据筛选条件有1314520条结果</div><!--数据列表--><el-table:data="articals"style="width: 100%" stripe size="mini" ><el-table-columnprop="date"label="封面"></el-table-column><el-table-columnprop="title"label="标题"></el-table-column><el-table-columnprop="status"label="状态"><!--如果需要自定义遍历当前数据--><template slot-scope="scope"><el-tag v-if="scope.row.status===0">草稿</el-tag><el-tag v-else-if="scope.row.status===1">待审核</el-tag><el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag><el-tag v-else-if="scope.row.status===3" type="danger">审核失败</el-tag><el-tag v-else-if="scope.row.status===4" type="info">已删除</el-tag></template></el-table-column><el-table-columnprop="pubdate"label="发布时间"></el-table-column><el-table-columnprop="cover"label="操作"><template><el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button><el-button size="mini" icon="el-icon-delete" type="danger" circle></el-button></template></el-table-column></el-table><!--分页--><el-pagination class="list-table"layout="prev, pager, next":total="1000"></el-pagination></el-card></div>
</template>
<script>
import { getArtical } from '@/api/artical'export default {name: 'ArticalIndex',created () {this.loadArticals()},data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},articals: [] // 记录文章的数据}},methods: {onSubmit () {console.log('submit!')},loadArticals () {getArtical().then(res => {console.log(res)console.log(res)console.log(res)this.articals = res.data.data.results})}}
}</script>
<style scope lang="less">
.filter-card{margin-bottom: 30px;
}
.list-table{margin-bottom: 20px;
}
</style>
content--->index.vue
<template>
<div class="artical-container"><!--卡片--><el-card class="filter-card"><div slot="header" class="clearfix"><!--面包屑导航--><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></div><!--数据--><el-form ref="form" :model="form" label-width="40px" size="mini"><el-form-item label="状态"><el-radio-group v-model="status"><el-radio :label="null">全部</el-radio><el-radio :label="0">草稿</el-radio><el-radio :label="1">待审核</el-radio><el-radio :label="2">审核通过</el-radio><el-radio :label="3">审核失败</el-radio><el-radio :label="4">已删除</el-radio></el-radio-group></el-form-item><el-form-item label="频道"><el-select v-model="channelId" placeholder="请选择频道"><el-option label="全部" :value="null"></el-option><el-option :label="channel.name" :value="channel.id" v-for="(channel,index) in channels" :key="index"></el-option></el-select></el-form-item><el-form-item label="日期"><el-date-pickerv-model="rangeDate"type="datetimerange"placeholder="选择日期时间"align="right"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-item><el-button type="primary" :disabled="loading" @click="loadArticals(1)">查询</el-button></el-form-item></el-form></el-card><el-card class="filter-card"><div slot="header" class="clearfix">根据筛选条件有{{totalCount}}条结果</div><!--数据列表--><el-table:data="articals"style="width: 100%" stripe size="mini" ><el-table-columnprop="date"label="封面"v-loading="loading"><template slot-scope="scope"><img v-if="scope.row.cover.images[0]" :src="scope.row.cover.images[0]" class="artical-cover" alt=""><img v-else class="artical-cover" src="./pic_bg.png" alt=""></template></el-table-column><el-table-columnprop="title"label="标题"></el-table-column><el-table-columnprop="status"label="状态"><!--如果需要自定义遍历当前数据--><template slot-scope="scope"><el-tag :type="articalsStatus[scope.row.status].type">{{articalsStatus[scope.row.status].text}}</el-tag><!-- <el-tag v-else-if="scope.row.status===1">待审核</el-tag><el-tag v-else-if="scope.row.status===2" type="success">审核通过</el-tag><el-tag v-else-if="scope.row.status===3" type="danger">审核失败</el-tag><el-tag v-else-if="scope.row.status===4" type="info">已删除</el-tag>--></template></el-table-column><el-table-columnprop="pubdate"label="发布时间"></el-table-column><el-table-columnprop="cover"label="操作"><template slot-scope="scope"><el-button size="mini" icon="el-icon-edit" type="primary" circle></el-button><el-button size="mini" icon="el-icon-delete" type="danger" @click="onDeleteArtical(scope.row.id)" circle></el-button></template></el-table-column></el-table><!--分页--><el-pagination class="list-table"layout="prev, pager, next":total="totalCount" :page-size="pageSize":disabled="loading"@current-change="OnCurrentChange" ></el-pagination></el-card></div>
</template>
<script>
import {getArtical,deleteArtical,getArticalChannels
} from '@/api/artical'export default {name: 'ArticalIndex',created () {this.loadArticals(1)this.loadChannels()},data () {return {loading: true,form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},status: null, // 状态为空 查询文章的状态totalCount: 0, // 初始数据pageSize: 20, // 每页大小articals: [], // 记录文章的数据channels: [],channelId: null, // 文章的频道rangeDate: null, // 日期数据articalsStatus: [{ status: 0, text: '草稿', type: 'info' },{ status: 1, text: '待审核', type: '' },{ status: 2, text: '审核通过', type: 'success' },{ status: 3, text: '审核失败', type: 'warning' },{ status: 4, text: '已删除', type: 'danger' }]}},methods: {// 文章删除onDeleteArtical (articleId) {this.$confirm('确认删除吗', '删除提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {/* 要删除的文章id */deleteArtical(articleId)}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})},onSubmit () {console.log('submit!')},loadArticals (page = 1) {this.loading = truegetArtical({page,per_page: this.pageSize,status: this.status,channel_id: this.channelId,/** */begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,end_pubdate: this.rangeDate ? this.rangeDate[1] : null}).then(res => {const { results, total_count: totalCount } = res.data.datathis.totalCount = totalCountthis.articals = results// 关闭加载this.loading = false})},loadChannels () {getArticalChannels().then(res => {console.log(res)this.channels = res.data.data.channels})},OnCurrentChange (page) {this.loadArticals(page)}}
}</script>
<style scope lang="less">
.filter-card{margin-bottom: 30px;
}
.list-table{margin-bottom: 20px;
}
.artical-cover{width: 60px;background-size:cover;
}
</style>
publish-->index.vue
<template><!--card插件--><div class="publish-container"><el-card class="box-card"><div slot="header" class="clearfix"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item>发布文章</el-breadcrumb-item></el-breadcrumb><el-form ref="form" :model="form" label-width="80px"><el-form-item label="标题"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="内容"><el-input type="textarea" v-model="form.desc"></el-input></el-form-item><el-form-item label="封面"><el-radio-group v-model="form.resource"><el-radio label="单图"></el-radio><el-radio label="三图"></el-radio><el-radio label="无图"></el-radio><el-radio label="自动"></el-radio></el-radio-group></el-form-item><el-form-item label="频道"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item>><el-form-item><el-button type="primary" @click="onSubmit">发表</el-button><el-button>存入草稿</el-button></el-form-item></el-form></div></el-card></div>
</template>
<script>
export default {data () {return {form: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''}}},methods: {onSubmit () {console.log('submit!')}}
}
</script>
<style></style>
运行结果
前端学习（2476）：表单数据绑定处理相关推荐
- 前端学习之表单验证（超详细）
表单验证: 主要用于验证input框的非空或者类型是否正确. iView表单验证: 参数详解(html部分): <Form ref="form" :model="f ...
- 前端学习 -- HtmlCss -- 表单
表单的作用就是用来将用户信息提交给服务器的,比如:百度的搜索框 注册 登录这些操作都需要填写表单. 使用form标签创建一个表单,form标签中必须指定一个action属性,该属性指向的是一个服务器的 ...
- 学习前端——表格、表单
学习前端--表格.表单 表格在日常生活中使用的非常的多,比好excel就是 专门用来创建表格的工具, 表格就是用来表示一些格式化的数据的,比如:课程表.银行对账单 在网页中也可以来创建出不同的表格. ...
- 【PHP学习】表单验证实现注册功能
上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能. 网页界面博客链接:PHP 学习之路(1)-- Simple Message 系统 基础语法博 ...
- 【前端基础】表单标签/提交
[前端基础]表单标签/提交 表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结 表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码 小结 表单标签 学习目标 能够知道表 ...
- 获取form表单_【第1535期】前端 Form 的表单的一个通用解决方案
前言 今日早读文章由阿里@布达投稿分享. @布达,Alibaba Fusion项目组的.花名潕量.主要专注在设计系统.组件.可视化搭建这个领域 正文从这开始-- Fusion Next - Form ...
- 前端：简述表单提交前如何进行数据验证
前端:简述表单提交前如何进行数据验证 通常在提交表单数据时,我们会对数据进行验证,例如某些字段是必填字段,不能为空,这时应该如何做呢?有如下三种方法: 一.在button的submit事件进行判断 & ...
- 【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单 表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
- JeecgBoot学习_Online表单初体验
JeecgBoot学习Online表单初体验 在这几个地方改起来 在页面属性里选择类型 再建一个商品表 为了使得选择有树形结构 我们修改这两处 备注: 1.字典table 填写树控件对应的表名 { 例 ...
- 表单识别（四）-基于深度学习的表单识别)-OCR
(论文研读后,感觉有用的一些笔记,主要是给自己记录) 论文:熊雨点,基于深度学习的表单识别系统的研究与实现 基于深度学习的表单识别 前言: 文档检测方法: 基于扩张卷积残差网络的表单文档定位方法: 扩 ...
最新文章
- 一次失败的尝试：paxosstore示例编译
- Verilog随机数生成$random
- 【转】TCP协议的无消息边界问题
- 业务中台01：中台解决方案本质在解决什么问题？
- ndroid中View.inflate()
- python第三方插件pip是什么_Python怎么安装第三方模块？
- 基于Node.js+Electron+CPP(DLL)的Windows桌面应用程序(自助终端)开发简介
- 【cooper】深度学习入门：基于Python的理论与实现(鱼书)_个人读书笔记
- 计算机网络中出现异常流量,计算机网络下网络流量异常的检测算法
- 有关前端性能优化—DNS解析优化的方法？
- Android手机减少微信步数,iPhone微信步数竟然比安卓少很多，原因已明确！
- AI绘画日赚千元？百度、谷歌已入局，流水线画师要被抢单了
- php自我介绍50字,自我介绍50字
- 我的思文斋：积水成渊则蛟龙生焉
- Buffon's Needle An Analysis and Simulation------蒙特卡洛法模拟蒲丰（Buffon）投针实验-使用Matlab
- 【Java】递归法求n个元素的全排列
- Android 下载 自动安装 解析错误,studio下载APK到手机提示解析错误解决方法
- swagger屏蔽某些接口
- CC1101/CC1100、stc单片机模拟2262-2272解码
- 从算法上解读自动驾驶是如何实现的？
热门文章
- 拓展欧几里得理论基础（含一定证明）
- python爬虫消费者与生产者_Condition版生产者与消费者模式
- java 线程简介_java多线程介绍
- 三菱模拟量输入与输出程序_初学PLC是学习西门子还是三菱？
- 管理活动目录域服务实训_管理学院学生党支部开展实践教育基地服务活动
- uniapp网络请求获取数据_2.uni-app 发起网络请求
- php手机端多图预览上传,JS实现多图预览上传的实例代码
- 天才基本法_《天才基本法》强推！年度神仙小说，看完这本书我竟然爱上了数学...
- django 模板两次for循环_Django模板之基本的 for 循环 和 List内容的显示方式
- WordPress后台删除不需要的侧边栏菜单