成功el-table-column部分字段可编辑
<template>
<div class="app-container">
<div style="text-align: right">
<el-button type="primary" @click="AddBatch()">保存全部</el-button>
</div>
<el-table
v-loading="listLoading"
:data="list.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
element-loading-text="Loading"
border
fit
highlight-current-row
:header-cell-style="CommonJs.rowClass"
>
<el-table-column
prop="username"
label="用户名"
align="center"
width="100px"
>
<template scope="scope">
<el-input size="mini" v-model="scope.row.username"></el-input>
</template>
</el-table-column>
<el-table-column
prop="num1"
label="数量"
width="110px"
align="center"
></el-table-column>
<el-table-column label="操作" align="center" min-width="100px">
<template slot-scope="scope">
<el-button
type="danger"
icon="el-icon-delete"
@click="delRow(scope.$index, list)"
circle
></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
layout="prev, pager, next, sizes, total, jumper"
:page-sizes="[5, 10, 20, 100]"
:page-size="pageSize"
:total="list.length"
:current-page.sync="currentPage"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
style="text-align: center; margin-top: 1%"
></el-pagination>
</div>
</template>
<script>
import { getList, AddBatch } from "@/api/test";
export default {
filters: {},
data() {
return {
list: [],
listLoading: true,
usernamef: "",
pageSize: 20,
currentPage: 1,
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.listLoading = true;
let param = { username: this.usernamef };
getList(param).then((response) => {
this.list = response.Data;
this.listLoading = false;
this.currentPage = 1;
});
},
handleCurrentChange: function (cpage) {
this.$data.currentPage = cpage;
},
handleSizeChange: function (psize) {
this.$data.pageSize = psize;
},
AddBatch() {
//代表通过验证 ,将参数传回后台
let params = this.list;
debugger;
AddBatch(params).then((res) => {
this.$message({
type: "info",
message: res.Message,
});
if (res.Code == 702) {
return;
}
});
},
},
};
</script>