解释以下代码<template>
	<section>
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<!-- <el-form-item>
					<el-input size="small" v-model="filters.name" placeholder="姓名" @keydown.enter.native="getUser"></el-input>
				</el-form-item> -->
				<el-form-item>
					<el-button size="small" type="primary" icon="el-icon-search" @click="getUser" >查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="small" type="primary" icon="el-icon-circle-plus-outline" v-on:click="dialogForm">新建</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<el-table
      :data="userData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      border
      stripe
      size="medium"
      style="width: 100%;margin-top:20px"
      v-loading="loading">
	    <el-table-column label="Id" prop="id">
	    </el-table-column>
	    <el-table-column label="姓名" prop="username">
	    </el-table-column>
      <el-table-column label="联系电话"  prop="phone">
	    </el-table-column>
	    <el-table-column label="地址"  prop="address">
	    </el-table-column>
	    <el-table-column label="权限"  prop="authority">
        <template slot-scope="scope">
	        {{ scope.row.role === 1 ? '管理员' :'用户' }}
	      </template>
	    </el-table-column>
      <el-table-column label="注册时间" prop="createTime">
	    </el-table-column>
	    <el-table-column label="操作">
	    	<template slot-scope="scope">
          <el-button  @click="eidt(scope.row)" type="text" size="small">编辑</el-button>
	      </template>
	    </el-table-column>
	  </el-table>

	  <el-dialog title="新增人员信息" :visible.sync="newDialog" @close="resetForm('newForm')">
	  	<el-form label-width="80px" :model="newForm" ref="newForm" :rules="rules">
        <el-form-item label="账号" prop="username">
		      <el-input v-model="newForm.username"  maxlength="11"
              show-word-limit></el-input>
		    </el-form-item>
		    <el-form-item v-if="!newForm.id" label="密码" prop="password"  >
		      <el-input v-model="newForm.password" type="password" maxlength="20"
              show-word-limit></el-input>
		    </el-form-item>
        <el-form-item label="电话" prop="phone"  >
		      <el-input v-model="newForm.phone" maxlength="11"
              show-word-limit></el-input>
		    </el-form-item>   
        <el-form-item label="权限" prop="role"  >
		      <el-select v-model="newForm.role" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
		    </el-form-item>      
        <el-row>
          <el-col>
            <el-form-item label="地址" prop="address">
              <el-input type="textarea"  v-model="newForm.address" maxlength="255"
              show-word-limit></el-input>
            </el-form-item>
          </el-col>
        </el-row>  
		  </el-form>

		  <div slot="footer" class="dialog-footer">
		    <el-button @click="resetForm('newForm')">取 消</el-button>
		    <el-button type="primary" @click="checkInformation">确 定</el-button>
		  </div>
		</el-dialog>

	  <div class="block">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page.sync="currentPage"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="this.userData.length">
	    </el-pagination>
	  </div>
	</section>
</template>


<script>
import axios from 'axios'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			filters: {
				name: ''
			},
			userData: [],
			newForm: {
				Id:'',
				name:'',
				password:'',
				authority:'',
        phone: "",
        laboratory:""
			},
			newDialog:false,
			loading: false,
      rules: {
        address: [
          { required: true, message: '请填写地址', trigger: 'changed' }
        ],
        phone: [
           { required: true, message: '请填写电话', trigger: 'changed' }
        ],
        name: [
          { required: true, message: '请填写姓名', trigger: 'changed' }
        ],
        username: [
          { required: true, message: '请填写学号', trigger: 'changed' }
        ],
        role: [
          { required: true, message: '请选择权限', trigger: 'changed' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'changed' }
        ]
      },
      checkOk:false,
      activeDelete:'',
			currentPage: 1,
      pageSize: 10,
       options: [
        { label: '管理员', value: 1 },
        { label: '用户', value: 2 },    
      ],
		}
	},
	computed: {
		...mapState(['nickName','authority',',laboratory'])
	},
	methods: {
		getUser() {
			this.loading = true
			// if(this.nickName) {
				axios.get('/admin/users').then((response)=>{
          let res = response.data;
					this.userData = res.rows  
					this.loading = false
        }).catch((err) => {
          this.loading = false
					console.log(err);
				})
			// }
		},
		dialogForm() {
			this.newDialog = true
			this.newForm = {
        username: '',
        password: '',
        address: '',
        phone:"",
        role:""
      }
		},
		resetForm(formName) {
      this.$refs[formName].resetFields();
      this.newDialog = false
    },
    checkInformation() {   //检验新建表单信息是否为空
      this.checkOk = false;
		console.log(this.newForm);
    	for(let key in this.newForm) {
        if (!this.newForm[key]) {
          console.log(key);
    			this.$message({ message: '请将人员信息填写完整',type: 'warning',center: true });
    			this.checkOk = false;
  			  break;	
    		} else {
    			this.checkOk = true;
    		}
    	}
    	if(this.checkOk) {
    		this.newForm.id ?  this.update():this.submitInformation() ;
    	}    	
    },
    eidt(row) { 
      this.newDialog = true
			this.newForm = row
    },
    submitInformation() {   //提交新建信息
    	axios.post('/admin/user',this.newForm).then((response)=>{
				let res = response.data;
				if (res.code === 200){
					this.newDialog = false
					this.$message({ message: '新建人员信息成功！',type: 'success',center: true });
					this.getUser()			
        } else {
          console.log(res);
					this.$message({ message: res.msg,type: 'error',center: true });
				}
			})
    },
    update() { 
      axios.put('/admin/user',this.newForm).then((response)=>{
				let res = response.data;
				if (res.code === 200){
					this.newDialog = false
					this.$message({ message: '编辑人员信息成功！',type: 'success',center: true });
					this.getUser()			
        } else {
          console.log(res);
					this.$message({ message: res.msg,type: 'error',center: true });
				}
			})
    },
		handleDelete(row) {
      this.activeDelete = row;
      this.$confirm('是否确定删除该人员?', '提示', {
	      confirmButtonText: '确定',
	      cancelButtonText: '取消',
	      type: 'warning'
	    }).then(() => {
	      axios.post('/users/delete',{Id: this.activeDelete.Id}).then((response)=>{
					let res = response.data;
					if (res.status==='0'){
						this.$message({ message: '删除成功！',type: 'success',center: true });
						this.getUser()			
					} else {
						this.$message({ message: '出错，请稍后再试！',type: 'warning',center: true });
					}
				})	
	    })
    },
		handleSizeChange(val) {
			this.pageSize = val;
		},
		handleCurrentChange(val) {
			this.currentPage = val;
		}
	},
	mounted() {
		this.getUser()
	}
}

</script>

<style lang="scss" scoped="" type="text/css"> 
	
	.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .toolbar {
	  background: #f2f2f2;
	  padding: 10px;
	  border:1px solid #dfe6ec;
	  margin: 10px 0px;
	  .el-form-item {
	    margin-bottom: 10px;
	  }
	}
  .el-pagination {
		margin: 30px;
	}
</style>