<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Demo</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-table-add-row {
margin-top: 10px;
width: 100%;
height: 34px;
border: 1px dashed #c1c1cd;
border-radius: 3px;
cursor: pointer;
justify-content: center;
display: flex;
line-height: 34px;
}</style>
</head>
<body>
<div id="app">
<el-row>
<el-col span="24">
<el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
<el-table-column type="index"></el-table-column>
<el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
</el-input>
</span>
<span v-else>{{scope.row[v.field]}}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
{{scope.row.isSet?'保存':"修改"}}
</span>
<span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
删除
</span>
<span v-else class="el-tag el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
取消
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col span="24">
<div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
</el-col>
</el-row>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
//id生成工具 这个不用看 示例而已 模拟后台返回的id
var generateId = {
_count: 1,
get(){return ((+new Date()) + "_" + (this._count++))}
};
//主要内容
var app = new Vue({
el: "#app",
data: {
master_user: {
sel: null,//选中行
columns: [
{ field: "type", title: "远程类型", width: 120 },
{ field: "addport", title: "连接地址", width: 150 },
{ field: "user", title: "登录用户", width: 120 },
{ field: "pwd", title: "登录密码", width: 220 },
{ field: "info", title: "其他信息" }
],
data: [],
},
},
methods: {
//读取表格数据
readMasterUser() {
//根据实际情况,自己改下啊
app.master_user.data.map(i => {
i.id = generateId.get();//模拟后台插入成功后有了id
i.isSet=false;//给后台返回数据添加`isSet`标识
return i;
});
},
//添加账号
addMasterUser() {
for (let i of app.master_user.data) {
if (i.isSet) return app.$message.warning("请先保存当前编辑项");
}
let j = { id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true };
app.master_user.data.push(j);
app.master_user.sel = JSON.parse(JSON.stringify(j));
},
//修改
pwdChange(row, index, cg) {
//点击修改 判断是否已经保存所有操作
for (let i of app.master_user.data) {
if (i.isSet && i.id != row.id) {
app.$message.warning("请先保存当前编辑项");
return false;
}
}
//是否是取消操作
if (!cg) {
if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
return row.isSet = !row.isSet;
}
//提交数据
if (row.isSet) {
//项目是模拟请求操作 自己修改下
(function () {
let data = JSON.parse(JSON.stringify(app.master_user.sel));
for (let k in data) row[k] = data[k];
app.$message({
type: 'success',
message: "保存成功!"
});
//然后这边重新读取表格数据
app.readMasterUser();
row.isSet = false;
})();
} else {
app.master_user.sel = JSON.parse(JSON.stringify(row));
row.isSet = true;
}
}
}
});
</script>
</body>
</html>
<el-table
:data="tableDatas"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column prop="" label="期间" align="center">
<template slot-scope="scope">
<el-select
v-model="scope.row.periodId"
size="mini"
filterable
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="sysName" label="业绩目标值" align="center">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.performanceTarget"
v-show="scope.row.show"
type="number"
:min="0"
:controls="false"
:precision="2"
style="width: 90%"
size="mini"
/>
<span v-show="!scope.row.show">{{
scope.row.performanceTarget
}}</span>
</template>
</el-table-column>
<el-table-column prop="platformName" label="门诊业绩" align="center">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.mzyj"
v-show="scope.row.show"
type="number"
:min="0"
:controls="false"
:precision="2"
size="mini"
style="width: 90%"
/>
<span v-show="!scope.row.show">{{ scope.row.mzyj }}</span>
</template>
</el-table-column>
<el-table-column
prop="platformName"
label="业绩划扣比例"
align="center"
>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.performanceDeductRatio"
v-show="scope.row.show"
type="number"
:min="0"
:controls="false"
:precision="2"
size="mini"
style="width: 90%"
/>
<span v-show="!scope.row.show">{{
scope.row.performanceDeductRatio
}}</span>
</template>
</el-table-column>
<el-table-column
prop="platformName"
label="门诊划扣业绩"
align="center"
>
<template slot-scope="scope">
<el-input-number
v-model="scope.row.outpatientPerformance"
v-show="scope.row.show"
type="number"
:min="0"
:controls="false"
:precision="2"
size="mini"
style="width: 90%"
/>
<span v-show="!scope.row.show">{{
scope.row.outpatientPerformance
}}</span>
</template>
</el-table-column>
<el-table-column prop="context" label="门诊利润" align="center">
<template slot-scope="scope">
<el-input-number
v-model="scope.row.outpatientProfit"
v-show="scope.row.show"
type="number"
:min="0"
:controls="false"
:precision="2"
size="mini"
style="width: 90%"
/>
<span v-show="!scope.row.show">{{
scope.row.outpatientProfit
}}</span>
</template>
</el-table-column>
<el-table-column prop="" label="操作" min-width="180" align="center">
<template slot-scope="scope">
<el-button
@click="handleDelete(scope.$index)"
class="btn-text-red"
type="danger"
size="mini"
icon="el-icon-delete"
>删除
</el-button>
<el-button
@click="scope.row.show = true"
type="primary"
size="mini"
icon="el-icon-edit"
>编辑</el-button
>
<el-button
@click="save1(scope.row)"
type="success"
size="mini"
icon="el-icon-success"
>保存</el-button
>
</template>
</el-table-column>
</el-table>
js代码
handleAdd() {
this.tableData.push({
periodId: "",
performanceTarget: "",
mzyj: "",
performanceDeductRatio: "",
outpatientPerformance: "",
outpatientProfit: "",
show: true,
});
},
handleDelete(index) {
this.$confirm("此操作将永久删除, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.tableData.splice(index, 1)
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
})
})
},
save1(row) {
row.show = false;
},
<el-table
:data="dataDetail.judgmentLetterDets"
:row-class-name="tableRowClassName"
border
style="width: 100%"
max-height="500px"
@cell-click="tabClick">
<el-table-column
prop="reason"
label="原因说明"
align="center">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '原因说明'">
<el-input v-model="scope.row.reason" maxlength="300" placeholder="请输入原因" size="mini" @blur="inputBlur"/>
</span>
<span v-else>{{ scope.row.reason }}</span>
</template>
</el-table-column>
<el-table-column
prop="judgmentAmount"
label="判责金额(元)"
width="120px"
align="center">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '判责金额(元)'">
<el-input
v-model="scope.row.judgmentAmount"
:blur="inputBlur"
placeholder="请输入判责金额"
size="mini"
@blur="inputBlur"/>
</span>
<!-- <span v-else>{{ scope.row.judgmentAmount | fmoney }}</span> -->
</template>
</el-table-column>
<el-table-column prop="remark" label="备注" align="center" width="180">
<template slot-scope="scope">
<span v-if="scope.row.index === tabClickIndex && tabClickLabel === '备注'">
<el-input v-model="scope.row.remark" maxlength="300" placeholder="请输入备注" size="mini" @blur="inputBlur"/>
</span>
<span v-else>{{ scope.row.remark }}</span>
</template>
</el-table-column>
</el-table>
data:{
dataDetail:{judgmentLetterDets:[{}]},//这里是表格数据,这里给的一个对象表示有一条空数据
tabClickIndex: null, // 点击的单元格
tabClickLabel: '', // 当前点击的列名
// 添加明细原因 row 当前行 column 当前列
tableRowClassName({ row, rowIndex }) {
// 把每一行的索引放进row
row.index = rowIndex
},
tabClick(row, column, cell, event) {
switch (column.label) {
case '原因说明':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
case '判责金额(元)':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
case '备注':
this.tabClickIndex = row.index
this.tabClickLabel = column.label
break
default: return
}
console.log('添加明细原因', this.tabClickIndex, row, column, cell, event)
},
// 失去焦点初始化
inputBlur(row, event, column) {
this.tabClickIndex = null
this.tabClickLabel = ''
},