• 截图
    在这里插入图片描述
  • 输入框、按钮排列
    左对齐的用一个div封装起来,右对齐也用一个div封装起来。
     <!--
      	描述:新增、删除和运行按钮
     -->
     <div class="filter-container">
     	 <div class="letf-items" style="float: left;">
	     	 <el-input placeholder="项目名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
	     	 <el-input placeholder="负责人" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
	     	 <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>  	 	
     	 </div>
     	 <div class="right-items" style="float: right;">
	       <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">新  增</el-button>
	     	 <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-delete" >删  除</el-button>
	     	 <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-arrow-right" >运  行</el-button>
     	 </div>
     </div>

  • table栏
<!--
      	描述:项目列表展示
     -->
     <el-table
      
      :key="tableKey"
      :data="pro_list_data"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      >
	 
      <el-table-column type="selection" width="55"></el-table-column>
      
      <el-table-column
	      type="index"
	      label="序号"
	      width="55"
	      :index="indexMethod">
	    </el-table-column>
      <!--
      <el-table-column label="序号" prop="id" sortable="custom" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      -->
      <el-table-column label="项目名称" min-width="150px" prop="project">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.project }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="负责人" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.manager }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="项目人员" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.member }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="项目描述" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.desc }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="180">
	      <template slot-scope="scope">
	        <el-button
	          size="mini"
	          type="success"
	          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
	        <el-button
	          size="mini"
	          type="danger"
	          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
	      </template>
	    </el-table-column>
      
     </el-table>
  • 分页
  	<!--
      	描述:分页
    -->
    <div class="fenye">
      <el-pagination
	     	background
	     	v-show="pro_pages>0"
	     	layout="prev, pager, next"
	     	:current-page="current_page"
	     	:page-size = "page_size"
	      :total="pro_pages"
	      @current-change="pageChange"
	     	@pagination="getList"/>	
    </div>
    
  • Dialog对话框
    在这里插入图片描述

width=“35%” 控制弹窗的宽度

  	<!--
      	Dialog 对话框
     -->
    <el-dialog title="创建项目" :visible.sync="dialogFormVisible" width="35%">
		  <el-form ref="tempData" :rules="rules" :model="tempForm" label-position="left" label-width="120px" style="width: 420px; margin-left:50px;">
		    <el-form-item label="项目名称" prop="projectName">
		      <el-input v-model="tempForm.projectName" placeholder="请输入项目名称~"/>
		    </el-form-item>
		    <el-form-item label="负责人" prop="projectManager">
		      <el-input v-model="tempForm.projectManager" placeholder="请输入负责人~"/>
		    </el-form-item>
		    <el-form-item label="项目人员" prop="projectMember">
		      <el-input v-model="tempForm.projectMember" placeholder="请输入项目人员~"/>
		    </el-form-item>
		    <el-form-item label="项目描述" prop="projectDesc">
		      <el-input v-model="tempForm.projectDesc" placeholder="请输入项目描述~"/>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="createData()">确 定</el-button>
		  </div>
    </el-dialog>

必填项规则rules

:rules="rules" :model="tempForm" 控制Dialog弹框的必填项
export default {
    data() {
      return {
        // dialog 对话框
        dialogFormVisible: false,
        rules: {
	        projectName: [{ required: true, message: '必填项', trigger: 'change' }],
	        projectManager: [{ required: true, message: '必填项', trigger: 'change' }],
	        projectMember: [{ required: true, message: '必填项', trigger: 'change' }]
	      },
      }
    }
}
  • 编辑
    在这里插入图片描述
<el-table-column label="操作" width="180">
	      <template slot-scope="scope">
	        <el-button
	          size="mini"
	          type="success"
	          @click="handleUpdate(scope.row)">Edit</el-button>
	    </el-table-column> 
handleUpdate(row) {
      	console.log(row)
	      this.tempForm = Object.assign({}, row) // copy obj
	      this.dialogTitle = "编辑项目"
	      console.log(this.tempForm)
	      this.dialogFormVisible = true
	      this.$nextTick(() => {
	        this.$refs['tempData'].clearValidate()
	      })
      },

用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model的参数project和table列表的参数保持一致

在这里插入图片描述

后端用的Django,前端参考https://panjiachen.github.io/vue-element-admin-site/zh/guide/

在这里插入图片描述

<template>
  <div class="pro-container" style="width: 1200px;">	
  	<!--
      	描述:新增、删除和运行按钮
     -->
     <div class="filter-container">
     	 <div class="letf-items" style="float: left;">
	     	 <el-input placeholder="项目名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
	     	 <el-input placeholder="负责人" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter"/>
	     	 <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>  	 	
     	 </div>
     	 <div class="right-items" style="float: right;">
	       <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">新  增</el-button>
	     	 <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-delete" >删  除</el-button>
	     	 <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-arrow-right" >运  行</el-button>
     	 </div>
     </div>

  	<!--
      	描述:项目列表展示
     -->
     <el-table
      :key="tableKey"
      :data="pro_list_data"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
	      type="index"
	      label="序号"
	      width="55"
	      :index="indexMethod">
	    </el-table-column>
      <!--
      <el-table-column label="序号" prop="id" sortable="custom" align="center" width="65">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      -->
      <el-table-column label="项目名称" min-width="150px" prop="project">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.project }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="负责人" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.manager }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="项目人员" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.member }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="项目描述" min-width="150px">
        <template slot-scope="scope">
          <span class="link-type">{{ scope.row.desc }}</span>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="180">
	      <template slot-scope="scope">
	        <el-button
	          size="mini"
	          type="success"
	          @click="handleUpdate(scope.row)">Edit</el-button>
	        <el-button
	          size="mini"
	          type="danger"
	          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
	      </template>
	    </el-table-column>     
     </el-table>

  	<!--
      	描述:分页
    -->
    <div class="fenye">
      <el-pagination
	     	background
	     	v-show="pro_pages>0"
	     	layout="prev, pager, next"
	     	:current-page="current_page"
	     	:page-size = "page_size"
	      :total="pro_pages"
	      @current-change="pageChange"
	     	@pagination="getList"/>	
    </div>
    
  	<!--
      	Dialog 对话框
     -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="35%">
		  <el-form ref="tempData" :rules="rules" :model="tempForm" label-position="left" label-width="180px" style="width: 420px; margin-left:50px;">
		    <el-form-item label="项目名称" prop="projectName">
		      <el-input v-model="tempForm.project" placeholder="请输入项目名称~"/>
		    </el-form-item>
		    <el-form-item label="负责人" prop="projectManager">
		      <el-input v-model="tempForm.manager" placeholder="请输入负责人~"/>
		    </el-form-item>
		    <el-form-item label="项目人员" prop="projectMember">
		      <el-input v-model="tempForm.member" placeholder="请输入项目人员~"/>
		    </el-form-item>
		    <el-form-item label="项目描述" prop="projectDesc">
		      <el-input v-model="tempForm.desc" placeholder="请输入项目描述~"/>
		    </el-form-item>
		  </el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="createData()">确 定</el-button>
		  </div>
    </el-dialog>
    
  	<!--
      	结束
     -->
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        // dialog 对话框
        dialogFormVisible: false,
        dialogTitle:"创建项目",
        // 列表数据默认为空
        pro_list_data: [],
        // 页面默认为1
        pro_pages:1,
        // 每页数据条数
      	page_size:10,
      	// 当前页码
      	current_page:1,
        tempForm: {
          project: '',
          manager: '',
          member: '',
          desc: ''
        },
        rules: {
	        project: [{ required: true, message: '必填项', trigger: 'change' }],
	        manager: [{ required: true, message: '必填项', trigger: 'change' }],
	        member: [{ required: true, message: '必填项', trigger: 'change' }]
	      },
      }
    },
    created() {
    	this.getList();
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
	    handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      indexMethod(index) {
        return index + 1;
      },
      pageChange(current_page) {
      	this.current_page = current_page;
        console.log(`当前页:${this.current_page}`);
        this.getList();
      },
	      handleFilter() {
	      this.current_page = 1
	      this.getList()
    	},
    	resetTemp() {
	      this.tempForm = {
	        project: '',
          manager: '',
          member: '',
          desc: ''
	      }
      },
    	handleCreate() {
	      this.resetTemp()
	      this.dialogFormVisible = true
	      this.dialogTitle = "创建项目"
	      this.$nextTick(() => {
	        this.$refs['tempData'].clearValidate();
	      })
      },
      handleUpdate(row) {
      	console.log(row)
	      this.tempForm = Object.assign({}, row) // copy obj
	      this.dialogTitle = "编辑项目"
	      console.log(this.tempForm)
	      this.dialogFormVisible = true
	      this.$nextTick(() => {
	        this.$refs['tempData'].clearValidate()
	      })
      },
      getList(){
      	axios.post('/getProName/',{
	    		page:this.current_page,
	    		page_size:10
	    	})
	    	.then((response) => {
	    		// 响应体
	    		this.res = response.data;
	    		// 返回数据
	    		this.pro_list_data = this.res.data.projects;
	    		// 页数
	    		this.pro_pages = 10 * this.res.data.total_pages;
	    	})
	    	.catch((error) => {
	    		console.log(error);
	    	});
      },
      createData() {    
      	this.$refs['tempData'].validate((valid) => {
	        if (valid) {        
		        if (valid) {		        	
		          axios.post('/addProject/',{
				    		temp_form:this.tempForm,
				    		page_size:10
			    	  })
			        .then((response) => {
		            this.dialogFormVisible = false;
		            this.$notify({
		              title: '成功',
		              message: '创建成功',
		              type: 'success',
		              duration: 2000
			          })
		            this.current_page = 2
	              this.getList()
				      })
			        .catch((error) => {
	    		       console.log(error);
	    	      });
	      		}
		      }
	      })
	    },
    }
  }
</script>

<style>
.pro-container {
    padding: 15px 32px;
    margin: 4px 2px;
}
.fenye {
	  margin-top: 10px;
}
</style>
Logo

前往低代码交流专区

更多推荐