翻译：<el-form-item> <el-button type="primary" @click="search()" class="search_btn_find">查询</el-button> <el-button @click="reset()" style="margin-right: 74px;" class="search_btn_reset">重置</el-button> <router-link v-if="user_group == '管理员' || $check_action('/dish_type/table','add') || $check_action('/dish_type/view','add')" class="el-button el-button--default el-button--primary search_btn_add" to="./view?">添加 </router-link> <el-button v-if="user_group == '管理员' || $check_action('/dish_type/table','del') || $check_action('/dish_type/view','del')" class="search_btn_del" type="danger" @click="delInfo()">删除</el-button> </el-form-item> </el-col>

这是一个 Vue.js 的代码块，其中包含一个表单元素（<el-form-item>），以及一些按钮组件（<el-button>）和一个路由链接组件（<router-link>）。其中，第一个按钮是“查询”，第二个按钮是“重置”，第三个按钮是“添加”，第四个按钮是“删除”。同时，代码中还涉及用户权限（user_group）和权限检查（$check_action）。

相关问题

解释代码<template> <div class="paragraph-info"> <!-- 显示段落内容 --> <div class="header"> <el-button text type="danger" @click="state.clearAll">一键清空</el-button> <span>共计：</span> <b>{{ state.data.length }}</b> </div> <div class="box"> <template v-if="state.data.length > 0"> <div class="item" v-for="(i, k) in state.data" :key="k"> <div class="tp"> <div class="tt"> {{ i.title }} </div> <div class="act"> <el-button size="small" type="primary" text @click="state.open(i)" >编辑</el-button > <el-button size="small" type="danger" text @click="state.del(i)" >删除</el-button > </div> </div> <div class="cnt"> <div v-html="i.content"></div> </div> </div> </template> <template v-else> <div class="no-data">点击下方“新增段落”按钮新增。</div> </template> </div> <div class="plus-btn" @click="state.open()">新增段落</div> </div> <!-- 新增窗口 --> <el-dialog v-model="state.dialog" append-to-body :close-on-click-modal="false" destroy-on-close width="996px" top="5%" > <template #header> <slot>信息更新</slot> </template> <el-card> <el-form :model="state.form" ref="formRef" label-position="top" :rules="state.rules" > <el-form-item label="标题" prop="title"> <el-input placeholder="请输入标题" v-model.number="state.form.title" ></el-input> </el-form-item> <el-form-item label="内容" prop="content"> <self-editor v-model="state.form.content"></self-editor> </el-form-item> </el-form> </el-card> <template #footer> <el-button type="primary" @click="state.handler()"> 保存 </el-button> <el-button @click="state.dialog = false">关闭</el-button> </template> </el-dialog> </template>

这段代码是一个Vue组件的模板代码，包含了一个用于显示段落信息的页面和一个用于新增或编辑段落的弹出窗口。具体解释如下：

1. 页面部分：

- 使用了一个名为paragraph-info的div作为组件的根元素；
- 在header中添加了一个清空按钮和一个显示段落数量的元素；
- 在box中使用了v-if和v-for指令来循环渲染每个段落的标题和内容，当段落数量为0时，显示一个“点击下方‘新增段落’按钮新增”提示；
- 在plus-btn中添加了一个用于打开弹出窗口的按钮。

2. 弹出窗口部分：

- 使用了一个el-dialog组件作为弹出窗口，绑定了一个dialog变量用于控制其显示和隐藏；
- 在header slot中添加了一个“信息更新”的标题；
- 在el-form中添加了两个el-form-item元素，用于输入段落标题和内容；
- 在el-form-item中使用了prop属性来指定字段名，使用了v-model指令来绑定输入框的内容；
- 在最后的footer slot中添加了一个保存按钮和一个关闭按钮，点击保存按钮后会触发handler方法保存表单数据。

<template> <div class="form_container"> <div class="manage_tip"> <span class="title">后台管理系统</span> <el-form :model="loginUser" status-icon :rules="rules" ref="loginForm" class="loginForm" label-width="80px"> <el-form-item label="账号" prop="account"> <el-input v-model="loginUser.account" placeholder="请输入账号"></el-input> </el-form-item> <el-form-item label="密码" prop="credential"> <el-input type="password" v-model="loginUser.credential" placeholder="请输入密码"></el-input> </el-form-item> <el-form-item> <el-button type="primary" class="submit_btn" @click="submitForm('loginForm')">登录</el-button> </el-form-item> <!-- <div class="info"> <p>还没有账号,请先<router-link to="/register">注册?</router-link></p> </div> --> </el-form> </div> </div> </template>

这是一个 Vue.js 的模板代码，用于创建一个后台管理系统的登录页面。其中包含了一个表单（由`<el-form>`标签定义），包括账号和密码两个输入框（由`<el-input>`标签定义），以及一个登录按钮（由`<el-button>`标签定义）。表单的提交事件绑定在登录按钮的`@click`事件上，调用了一个名为`submitForm`的方法，并且在表单上定义了验证规则（由`:rules`属性指定）。在模板中还有一些注释，其中包括了一个提示信息和一个用于跳转到注册页面的链接，但是目前被注释掉了。