element-ui table表格行内编辑加校验
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-form ref="tableFrom" :model="tableFrom" :rules="tableFromRules">
<el-table :data="tableFrom.tableData" style="width: 100%;">
<el-table-column label="ID" min-width="180">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.id'" :rules="tableFromRules.id">
<el-input v-model="scope.row.id"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="name" min-width="180">
<template slot-scope="scope">
<el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="tableFromRules.name">
<el-input v-model="scope.row.name"></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" min-width="80">
<template slot-scope="scope">
<el-button type="text" @click="insert(scope.$index)">插入当前行</el-button>
<el-button type="text" @click="del(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-button type="success" icon="el-icon-plus" plain style="margin-top: 10px; width: 100%;" @click="add()">添加
</el-button>
</el-form>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
tableFrom: {
tableData: []
},
tableFromRules: {
id: [{
required: true,
message: '请输入id',
trigger: 'blur'
}],
name: [{
required: true,
message: '请输入name',
trigger: 'blur'
}]
}
},
mounted() {},
methods: {
add() {
this.tableFrom.tableData.push({
id: '',
name: ''
})
},
insert(index) {
this.tableFrom.tableData.splice(index, 0, {
id: '',
name: ''
})
},
del(index) {
this.tableFrom.tableData.splice(index, 1)
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献5条内容
所有评论(0)