VUE 按钮两边分布排列

最新推荐文章于 2024-05-18 16:11:19 发布
最新推荐文章于 2024-05-18 16:11:19 发布
阅读量2.1w 收藏 43
点赞数 11
分类专栏： 前端 文章标签： vue按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghs11/article/details/86251533
版权
  • 截图
    在这里插入图片描述
  • 输入框、按钮排列
    左对齐的用一个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>
zhanghs1988
关注
  • 11
    点赞
  • 踩
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【4】Vite+Vue3左右容器中相同属性的元素内容自动对齐
Etc.End的博客
07-18 635
这个需求的话相对比较冷门,一般会出现在图文排版,在文章或者网页中,将图片和文字按照某种规则进行对齐,提高排版效果和可读性.其次是做到页面一致性,一致的对齐方式可以使整个界面看起来更加的统一和协调,从而引导用户的注意力。这个功能的话其实开发永远用得最多，比如我们在git提交代码的时候，会有代码对比功能，很清晰的就能知道我们修改了些什么内容。如果你有word或者文章进行比对的话，就可以应用次功能，进行段落或者标题的对其，直接提供用户体验。
VUE el-table设置表格表头居中，内容列居中/左对齐/右对齐
乐逍遥
10-26 1万+
统一设置设置表头居中 加上【:header-cell-style="{'text-align':'center'}"】统一设置设置内容列居中 加上【:cell-style="{'text-align':'center'}"】在每个el-table-column标签上边设置。
vue视图左右布局方法
最新发布
qq_69775429的博客
05-18 256
【代码】vue视图左右布局方法。
vue中将按钮设置到网页最右边
热门推荐
小懒魔王的博客
07-04 2万+
<el-row :gutter="12"> <el-col :span="24"> <el-card shadow="always" class="cardstyle"> 靠港需求发布 <el-button type="success" class="button1" style="padding-right:10px"> 从Excel导入</el-button> .
el-form-item内让元素靠右
不爱熬夜的朱霸霸的博客
03-03 1万+
el-form-item内让元素（按钮）靠右对齐
ant design of vue 中a-form-item 的label文字内容默认右对齐，设置左对齐，在全局文件中添加
wwf1225的博客
10-11 2万+
ant design of vue 中a-form-item 的label文字内容默认右对齐，设置左对齐，在全局文件中添加 .ant-form-item-label { text-align: left; }
Element Input组件分析小结
10-17
主要介绍了Element Input组件分析小结，详细的介绍了Input组件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue实现开关按钮拖拽效果
10-14
在Vue.js中，实现开关按钮拖拽效果是一个有趣且实用的功能，这通常涉及到自定义指令（Directives）的使用。自定义指令允许我们扩展Vue的内置行为，使其能够处理更复杂的交互逻辑。以下是对给定代码的详细解释： 1. ...
Vue实现按钮级权限方案
10-15
主要介绍了Vue按钮级权限方案，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue实现自定义多选按钮
12-28
本文实例为大家分享了vue实现自定义多选按钮的具体代码，供大家参考，具体内容如下 图示 返回的选中列表是一个数组 html部分 <!-- 自定义多选 --> (item,index) key=index class=item.ischeck click=sel...
vue 点击按钮增加一行的方法
10-18
这样，当我们运行Vue应用时，初始会显示一行（值为1），点击“添加一行”按钮会向`customized_descs`添加新的元素，进而自动更新视图，显示新的一行。 总结一下，实现Vue中点击按钮增加一行的功能主要包括以下步骤...
Vue波纹按钮组件制作
12-29
先说一下用法： 默认按钮 默认按钮 定义速度和初始的波浪透明度 原理： 这里用的是canvas + requestAnimationFrame（兼容性可以网上找一下解决方法） 绘制的波纹，有些用的是css transform
Element el-row el-col 布局组件详解
qq_43248623的博客
07-05 9666
本文目录 背景 分栏布局 分栏间隔 分栏偏移 对齐方式 响应式布局 小结 1. 背景 element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。 区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。 2. 分栏布局 首先每行使用标签标识，然后每行内的列使用标识，至于每列整行的宽度比例，则使用:span属性进行设置。 如下代码，即为将1行等分为2列，为
自定义走马灯的左右按钮vue elementUI
00年女程序员分享自己的学习笔记
12-07 3087
自定义走马灯的左右按钮。这里的左右切换按钮，使用的是图片，，（随便找的网图凑合看看）。点击左右按钮会实现左右切换走马灯。代码如下：
前端-VUE-页面布局-flex布局整理-傻瓜教学
翩翩潇洒程序员
10-29 1万+
1.flex-direction:设置容器内部元素的排列方向 row: 定义排列方向 从左到右 row-reverse: 从右到左 column: 从上到下 column-reverse: 从下到上 图片介绍 flex-direction:row flex-direction:row-reverse flex-direction:column flex-directi...
如何让div靠右_div对齐 CSS实现DIV居中对齐 div居右对齐 div居左对齐
weixin_31858863的博客
01-12 1万+
使用CSS浮动属性实现DIV各种对齐，比如DIV层左对齐，DIV居中对齐，DIV居右对齐等(DIV靠右 居中 靠左对齐介绍篇)实现DIV对齐用到关键属性有两个，一个为float一个为margin。第一个float,可以让你div层居左居右对齐，另外一个margin实现div盒子居中对齐。接下来DIVCSS5使用分别实例介绍DIV布局对齐。为了过程DIV对齐变化，DIVCSS5设置3个DIV盒子，分...
三个按钮在一排，并且可以随意切换 vue
☆夏の独憶☆
06-23 1565
tem css
android 按钮并排左右_用户界面-并排2个按钮-android布局
weixin_39594439的博客
12-23 2752
用户界面-并排2个按钮-android布局我如何才能将2个按钮并排放置，以使它们占据整个宽度，并且它们之间有一点间距。我想过一个水平线性布局，其中2个子线性布局设置为与父级和权重1匹配，每个线性布局都包含按钮..有没有更简单的方法？ 可以通过相对布局完成吗？谢谢！4个解决方案104 votesandroid:id="@+id/LinearLayout02"android:layout_height...
vue 按钮固定在页面下方中心位置
06-09
要实现在页面下方中心位置固定的按钮，你可以使用 CSS position 属性来实现。具体步骤如下： 1. 在 HTML 文件中添加一个按钮元素，如 <button>Click Me</button>。 2. 在 CSS 文件中为按钮元素添加以下样式： ``` button { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); } ``` 这将使按钮元素的位置固定在页面底部，并且水平居中对齐。 3. 如果你使用的是 Vue.js 框架，则可以将样式添加到组件的样式中，或者将样式添加到全局样式表中。 这样就可以实现一个固定在页面下方中心位置的按钮了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值