element 表格行内进行编辑
<template>
<div class="process_manage">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>审批流程</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="seach_onoff = !seach_onoff">搜索按钮</el-button>
</div>
<el-row :gutter="10" :class="seach_onoff ? 'lz-seach-animation' : 'lz-seach'">
<!-- <el-col :span="5" class="lz-el-col"><el-input v-model="seach_val" @input="seachValue" placeholder="请输入内容"></el-input></el-col>
<el-col :span="5" class="lz-el-col"><el-button type="primary" size="small" icon="el-icon-search" plain @click="seachValue">搜索</el-button></el-col> -->
</el-row>
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="add_approver">添加审批流程</el-button>
<el-table :data="processData" border highlight-current-row :class="EditOnoff ? 'tb-edit' : 'tb-edit2'" @row-click="handleCurrentChange">
<el-table-column fixed prop="createDate" label="创建日期" width="150" :show-overflow-tooltip="true"></el-table-column>
<el-table-column label="流程名称" width="150" :show-overflow-tooltip="true">
<template scope="scope">
<el-input size="small" v-model="EditBefore.name" placeholder="流程名称"></el-input>
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="流程发起人" width="150" :show-overflow-tooltip="true">
<template scope="scope">
<el-input size="small" v-model="EditBefore.userName" placeholder="流程发起人" disabled></el-input>
<span>{{ scope.row.userName }}</span>
</template>
</el-table-column>
<el-table-column label="流程状态" width="150">
<template scope="scope">
<el-switch v-model="EditBefore.status" active-text="启用" inactive-text="禁用" active-value="0" inactive-value="1"></el-switch>
<span>{{ scope.row.status == 1 ? '禁用' : '启用' }}</span>
</template>
</el-table-column>
<el-table-column label="流程简介" :show-overflow-tooltip="true">
<template scope="scope">
<el-input size="small" v-model="EditBefore.remark" placeholder="流程简介"></el-input>
<span>{{ scope.row.remark }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="240">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleComplete" v-if="scope.row.id == EditBefore.id && EditOnoff">完成</el-button>
<el-button type="text" size="small" @click.stop="EditOnoff = false" v-if="scope.row.id == EditBefore.id && EditOnoff">取消</el-button>
<el-button type="text" size="small" @click="handleEdit(scope.$index, scope.row)" v-else="">编辑</el-button>
<el-button type="text" size="small" @click.stop="handleDelete(scope.$index, scope.row)">删除</el-button>
<el-button type="text" size="small" @click.stop="handleDelete(scope.$index, scope.row)">设置</el-button>
</template>
</el-table-column>
</el-table>
<!-- //分页 -->
<el-pagination
style="margin: 20px 0;float: right;"
@current-change="pageleCurrentChange"
:current-page="currentPage"
:page-sizes="[10]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="count"
></el-pagination>
</el-card>
</div>
</template> <script>
import { mapActions, mapGetters } from 'vuex';
export default {
name: 'process_manage',
computed: {
...mapGetters(['api'])
},
data() {
return {
seach_onoff: false, //搜索显示
seach_val: '', //搜索类容
currentPage: 1, //分页中当前第几页
count: 0, //分页数据总条数
processData: [
//流程数据
{
pmUserName: ''
}
],
//编辑
EditOnoff: false, //是否可编辑
EditBefore: {}, //编辑之前的数据
};
},
mounted() {
//获取登录用户的组织审批流程
this.getProcessData();
},
methods: {
//获取当前公司的所有审批流程
getProcessData() {
let that = this;
let req = {
pageNum: that.currentPage,
isPage: true
};
that.GLOBAL.doPost(that.api.GLOBAL_flow_getByOwner, req, function(res) {
if (res.code == 200) {
that.processData = res.data.list;
that.count = res.data.total;
}
});
},
//点击行
handleCurrentChange(row, event, column) {
let that = this;
console.log(row.id, that.EditBefore.id);
if (row.id == that.EditBefore.id) {
that.EditOnoff = true;
} else {
that.EditOnoff = false;
}
},
//编辑
handleEdit(index, row) {
let that = this;
console.log(row);
that.EditOnoff = true;
//复制编辑前的数据
that.EditBefore = { ...row };
},
//删除
handleDelete(index, row){
this.$confirm('是否删除此‘'+row.name+'’流程', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { }).catch(() => {
});
},
//完成
handleComplete() {
let that = this;
that.EditOnoff = true;
console.log(that.EditBefore);
that.$confirm('是否完成此次编辑', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
that.GLOBAL.doPost(that.api.GLOBAL_user_update, JSON.stringify(that.EditBefore), function(res) {
console.log(res);
if (res.code == 200) {
that.$message({ message: res.msg, type: 'success' });
that.EditOnoff = false;
//获取人员列表
that.getByOrg();
}
});
})
.catch(() => {});
},
//添加审批人
add_approver() {
this.$router.push({name:'processSetting',path:'/processSetting'})
},
//分页
pageleCurrentChange(val) {
// console.log(`当前页: ${val}`);
let that = this;
that.currentPage = val;
//获取当前公司的所有审批流程
that.getProcessData();
}
}
};
</script> <style scoped="scoped" lang="scss">
.lz-el-col {
width: 200px;
margin-bottom: 10px;
}
.el-table .lz-fontsize-weidth {
font-weight: bold;
}
.el-table .lz-fontsize {
font-weight: normal;
color: #888;
}
//搜索动画显示
.lz-seach {
max-height: 0px;
margin-bottom: 0px;
overflow: hidden;
}
.lz-seach-animation {
animation: lzmover 0.6s ease-in-out forwards;
display: block;
overflow: hidden;
} //表格的可编辑
.tb-edit .el-input {
display: none;
}
.tb-edit .el-select {
display: none;
}
.tb-edit .el-switch {
display: none;
}
.tb-edit .current-row .el-input {
display: block;
}
.tb-edit .current-row .el-select {
display: block;
}
.tb-edit .current-row .el-switch {
display: block;
}
.tb-edit .current-row .el-input + span {
display: none;
}
.tb-edit .current-row .el-switch + span {
display: none;
}
.tb-edit .current-row .el-select + span {
display: none;
}
//取消
.tb-edit2 .current-row .el-input + span {
display: block;
}
.tb-edit2 .el-input {
display: none;
}
.tb-edit2 .el-select {
display: none;
}
.tb-edit2 .el-switch {
display: none;
}
@keyframes lzmover {
0% {
height: 0px;
opacity: 0;
margin-bottom: 0px;
}
100% {
height: 100%;
opacity: 1;
margin-bottom: 10px;
}
} </style>
element 表格行内进行编辑的更多相关文章
- AppBoxPro - 细粒度通用权限管理框架(可控制表格行内按钮)源码提供下载
特别声明: 提供的源代码已经包含了 AppBoxPro 的全部源代码,用 VS2012 打开项目后,直接 Ctrl+F5 可以运行起来(默认使用VS自带的LocalDB数据库). FineUIPro是 ...
- 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理
编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...
- datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
- vxe-table 可编辑表格 行内编辑以及验证 element-UI集成
<vxe-table border show-overflow ref="xTable" ----------------------------------------- ...
- bootstrap-table 数据表格行内修改
bootstrap-table 数据行内修改js中设置列的属性 editable : { type : 'text',//数据显示在文本框内 emptytext : "--",// ...
- VUE+Element UI实现简单的表格行内编辑效果
原理是通过Css控制绑定的输入控件与显示值,在选中行样式下对控件进行隐藏或显示 <!DOCTYPE html> <html> <head> <meta cha ...
- easyui,datagrid表格,行内可编辑
最近用到easyui,需要表格内编辑,但是我同一个页面有多个表格,把官方的代码修改了一下,如下: HTML代码 <table id="dg" class="easy ...
- 推荐一个好用的行内可编辑的table组件 vxe-table
项目中有一个需要用户点击table单元格可编辑的需求,由于博主用的是elementUI,element组件内实现可编辑,用过的小伙伴都知道,非常麻烦,后来博主在浏览组件的时候发现了 一款非常好用的ta ...
- easyui学习笔记3—在展开行内的增删改操作
这一篇介绍在一个展开行内进行的增删操作,如果一行很长有很多的数据,在一个展开行内进行编辑将更加方便. 1.先看引用的资源 <link rel="stylesheet" hre ...
随机推荐
- ubuntu18.10搜狗输入法的安装
记录一下 1.卸载ibus ubuntu默认使用ibus管理输入法,官方推荐使用fcitx.我们先卸载ibus sudo apt-get remove ibus 清除ibus配置,如果没有设置 sud ...
- nodejs-os模块
JavaScript 标准参考教程(alpha) 草稿二:Node.js os模块 GitHub TOP os模块 来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 ...
- C++11的auto自动推导类型
auto是C++11的类型推导关键字,很强大 例程看一下它的用法 #include<vector> #include<algorithm> #include<functi ...
- SpringIOC原理
IOC(DI):其实这个Spring架构核心的概念没有这么复杂,更不像有些书上描述的那样晦涩.java程序员都知道:java程序中的每个业务逻辑至少需要两个或以上的对象来协作完成,通常,每个对象在使用 ...
- 3.1 go context代码示例
context.WithCancel返回两个有关联的对象,ctx与cancel,调用cancel发送一个空struct给ctx,ctx一旦接收到该对象后,就终止goroutine的执行;ctx是线程安 ...
- 网页设计单位 px,em,rem,vm,vh,%
px(pixels) 像素 (px) 是一种绝对单位,因为无论其他相关的设置怎么变化,像素指定的值是不会变化的. px就是设备或者图片最小的一个点,比如常常听到的电脑像素是1024x768的,表示的是 ...
- axios使用步骤详解(附代码)
Axios是一个基于Promise的 HTTP 库,可以用在浏览器和node.js 中,因为尤大大的推荐,axios也变得越来越流行.最近项目中使用axios也遇到了一些问题,就借此机会总结一下,如有 ...
- 为什么volatile能保证有序性不能保证原子性
对于内存模型的三大特性:有序性.原子性.可见性. 大家都知道volatile能保证可见性和有序性但是不能保证原子性,但是为什么呢? 一.原子性.有序性.可见性 1.原子性: (1)原子的意思代表着-- ...
- AI 2021 年度报告
建议大伙有空还是自己亲自读一下,虽然有点长,188页ppt. https://docs.google.com/presentation/d/1bwJDRC777rAf00Drthi9yT2c9b0Ma ...
- R数据分析:变量间的非线性关系,多项式,样条回归和可加模型
之前的文章中都是给大家写的变量间线性关系的做法,包括回归和广义线性回归,变量间的非线性关系其实是很常见的,今天给大家写写如何拟合论文中常见的非线性关系.包括多项式回归Polynomial regres ...