标签管理

阿吉拉
94 阅读2分钟

功能

搜索框：输入具有搜索功能；

重置：会刷新数据；

新增功能

点击编辑功能

搜索框

image.png

代码如下

	<!-- 搜索框 -->
		<el-form :model="queryParams" ref="queryForm" :inline="true">
		<el-form-item label="标签名称" prop="labelName">
		<el-input v-model="queryParams.labelName" clearable size="small"
			placeholder="请输入标签名称查询"
			@keyup.enter.native="handleQuery"></el-input>
		</el-form-item>
		<el-form-item label="状态" prop="state">
		<el-select v-model="queryParams.state" placeholder="全部" clearable>
		<el-option label="全部" value="0"></el-option>
		<el-option label="有效" value="1"></el-option>
		<el-option label="无效" value="2"></el-option>
		</el-select>
		</el-form-item>
		<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索
                </el-button>
	<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
	</el-form-item>
	</el-form>

代码解读

  • :model="queryParams",model是一个表单外层数据对象，类型是一个对象object；

    • 这个对象里有什么东西，就是里面表单的prop；
    	queryParams: {
  			pageNum: 1,
  			pageSize: 10,
  			// 标签名称
  			labelName: null,
  			// 状态
  			state: null,
  		},
    • prop="labelName",prop="state",这是里面表单域的model字段，传入 Form 组件的 model 中的字段。
    • el-input里面v-model的，就是小表单的prop值；

    新增按钮

    • 当点击新增按钮时，下面列表会相应出现，新增的内容;

<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain size="mini" @click="handleAdd">新增</el-button></el-col>
</el-row>

列表的表头

  • 是一个大表格，里面有很多列项目；
<el-table>
<el-table-column></el-table-column>
 <el-table-column></el-table-column>
  <el-table-column></el-table-column>
</el-table>
  • 每一列，都有prop,意思是对应列内容的字段名，也可以使用property属性；
  • label是显示的标题，
	<!-- 列表栏 -->
  	<el-table :data="tagList" v-loading="loading">
  		<el-table-column  type="index"
    width="70"  label="序号"></el-table-column>
  		<el-table-column prop="code" label="编号" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column prop="labelName" label="标签名称" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column prop="info" label="描述" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column prop="state" label="状态" :show-overflow-tooltip="true">
  			<template slot-scope="scope">
  				<el-tag :type="['', 'info'][scope.row.state - 1]">{{ ['有效', '无效'][scope.row.state - 1] }}</el-tag>
  			</template>
  		</el-table-column>
  		<el-table-column prop="createBy" label="创建人" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column prop="createTime" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column prop="updateBy" label="修改人" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column prop="updateTime" label="修改时间" :show-overflow-tooltip="true"></el-table-column>
  		<el-table-column fixed="right" label="操作" width="100">
  			<template slot-scope="scope">
  				<el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
  			</template>
  		</el-table-column>
  		<!-- <template>
         <el-button type="text" size="small" @click="edit"></el-button>
       </template>  -->
  	</el-table>

新增标签对话框

  • 当点击新增时，会弹出一个对话框，里面填的内容，就会出现在列表里面；
  • 对话框用<el-dialog>来表示；
  • <el-dialog>里也是表单，有<el-form>,<el-form -item>,有标签名和输入框等。

image.png

  • 需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。
  • 当点击新增时，visible的值变为true,此时就会出现dialog对话框；
handleAdd() {
this.open = true
	},

对话框里面的内容

  • 对话框就是一个表单，里面一般有标题和输入框，输入的内容，会在列表里面显示，列表还会自动出现一些数据；后台生成的，例如时间，操作人之类的；
  • 对话框里的内容有显示的标题label="编号"，每一个标题会对应一个 prop="code";
  • 对话框里的输入框里面的内容，对应的是v-model="form.code",
  • 所以在输入框里面写内容，v-model就会显示，并把它放在form对象的code里面；
  • 为什么放在form里面，因为在<el-form>里面用:model="form",model是一个表单外层数据对象，类型是一个对象object；,所以form是一个存放数据的对象；

提交

  • 当点击提交时，对话框里面的内容，就会提交到form对象里面，里面的键名和键值就会一一对应，当用的时候拿出来；
  • 当提交时，就会把刚才的form，就是this.form赋值给新的form;
avatar
文章
阅读
粉丝