VUE 按钮两边分布排列
<!--描述：新增、删除和运行按钮--><div class=&amp
·
- 截图
- 输入框、按钮排列
左对齐的用一个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>
前往低代码交流专区
更多推荐
11
0- 0
已为社区贡献1条内容
所有评论(0)