Vue2 element-table 动态添加一行
<template>
<div class="app-container">
<!-- 表格 -->
<el-table :data="tableData" :height="fullHeight" border>
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="subcompanyId" label="部门名称">
<template slot-scope="scope">
<el-select
v-model="scope.row.postId"
:disabled="scope.row.disableInput"
>
<el-option label="设计部" value="1234567890"></el-option>
<el-option label="产品部" value="9876543210"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="postId" label="岗位名称">
<template slot-scope="scope">
<el-select
v-model="scope.row.postId"
:disabled="scope.row.disableInput"
>
<el-option label="经理" value="1234567890"></el-option>
<el-option label="普通员工" value="9876543210"></el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="oaUserIds" label="姓名/手机号码">
<template slot-scope="scope">
<el-input
:disabled="scope.row.disableInput"
v-model="scope.row.oaUserIds"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button-group>
<el-button
icon="el-icon-edit"
size="mini"
:disabled="
!scope.row.oaUserIds ||
!scope.row.postId ||
!scope.row.subcompanyId
"
@click="subrow(scope.row)"
>提交</el-button
>
<el-button
icon="el-icon-delete"
size="mini"
@click="deleteRow(scope.row)"
>删除</el-button
>
</el-button-group>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="searchForm.pageNum"
:limit.sync="searchForm.pageSize"
@pagination="getList"
/>
<!-- 添加一行数据 -->
<el-button
type="primary"
class="buttonAdd"
icon="el-icon-plus"
@click="addRow"
>添加一行</el-button
>
</div>
</template>
<script>
export default {
data() {
return {
total: 0,
tableData: [], // 表格数据
newRow: {}, // 新增的一行数据
isDis: false,
fullHeight: window.innerHeight - 222 + "px",
};
},
mounted() {
},
methods: {
addRow() {
// 添加一行数据
const newRow = {
subcompanyId: undefined,
postId: undefined,
oaUserIds: undefined,
disableInput: false,
};
this.tableData.push(newRow);
},
deleteRow(row) {
// 删除行数据
const index = this.tableData.indexOf(row);
if (index !== -1) {
this.tableData.splice(index, 1);
}
},
},
};
</script>
写了一个动态表格,点下面按钮,动态添加带输入框和选择框的一条数据
标签:index,一行,element,添加,Vue2,table,total,tableData From: https://www.cnblogs.com/nuomibaibai/p/17789250.html