[求助] elementui 中 form 与 table 组件一起使用，排序后插入数据索引不对。
waiaan 2019-12-06 16:07:46 +08:00 3401 次点击这是一个创建于 2202 天前的主题，其中的信息可能已经有所发展或是发生改变。
<!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> </style> </head> <body> <div id="app"> <div class="table-container"> <el-form ref="form" :model="jobsData" label-width="0" :rules="formRules" :inline="true"> <el-table :data="jobsData.rows" header-cell-class-name="header-cell" :default-sort="{prop: 'job_title', order: 'ascending'}" stripe> <el-table-column label="index" width="100" align="center"> <template slot-scope="scope"> <span> {{scope.$index+1}} </span> </template> </el-table-column> <el-table-column prop="job_id" label="job id" sortable> <template slot-scope="scope"> <div v-if="scope.row.status==='show'"> {{scope.row.job_id}} </div> <div v-else> <el-form-item :prop="'rows.'+scope.$index+'.job_id'" :rules="formRules.job_id"> <el-input v-model="scope.row.job_id"></el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column prop="job_title" label="job title" sortable> <template slot-scope="scope"> <div v-if="scope.row.status==='show'"> {{scope.row.job_title}} </div> <div v-else> <el-form-item :prop="'rows.'+scope.$index+'.job_title'" :rules="formRules.job_title"> <el-input v-model="scope.row.job_title"></el-input> </el-form-item> </div> </template> </el-table-column> <el-table-column prop="min_salary" label="min salary" align="center" sortable> <template slot-scope="scope"> <div v-if="scope.row.status==='show'"> {{scope.row.min_salary}} </div> <div v-else> <el-form-item :prop="'rows.'+scope.$index+'.min_salary'"> <el-input-number v-model="scope.row.min_salary" :min="0"></el-input-number> </el-form-item> </div> </template> </el-table-column> <el-table-column prop="max_salary" label="max salary" align="center" sortable> <template slot-scope="scope"> <div v-if="scope.row.status==='show'"> {{scope.row.max_salary}} </div> <div v-else> <el-form-item :prop="'rows.'+scope.$index+'.max_salary'"> <el-input-number v-model.trim="scope.row.max_salary" :min="0"></el-input-number> </el-form-item> </div> </template> </el-table-column> <el-table-column align="center"> <template slot="header"> <el-button type="primary" size="small" @click="handleAdd"> + Add </el-button> </template> <template slot-scope="scope"> <div v-if="scope.row.status==='show'"> <el-button size="mini" @click.stop="handleEdit(scope)">Edit</el-button> <el-button size="mini" type="danger" @click.stop="handleDelete(scope.$index, scope.row)">Delete </el-button> </div> <div v-else-if="scope.row.status==='edit'"> <el-button type="primary" size="mini" @click.stop="save(scope,'modify')">Save</el-button> <el-button size="mini" type="danger" @click.stop="cancleSave(scope)">Cancle</el-button> </div> <div v-else-if="scope.row.status==='add'"> <el-button type="primary" size="mini" @click.stop="save(scope,'add')">Add</el-button> <el-button size="mini" type="danger" @click.stop="jobsData.rows.pop()">Cancle</el-button> </div> </template> </el-table-column> </el-table> </el-form> </div> <el-button type="primary" size="small" @click="handleAdd"> + Add </el-button> </div> <!-- import Vue before Element --> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <!-- import Javascript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data() { const validateJobId = (rule, value, cb) => { const currIndex = ~~rule.fullField.split('.')[1]; value = value.trim(); if (value === '') { cb(new Error('job_id is required')); } else { for (let i = 0; i < this.jobsData.rows.length; i++) { const { job_id } = this.jobsData.rows[i]; if (value === job_id && i !== currIndex) { cb(new Error('job_id is already exist')) } } cb(); } } const validateJobTitle = (rule, value, cb) => { const currIndex = ~~rule.fullField.split('.')[1]; value = value.trim(); if (value === '') { cb(new Error('job_title is required')); } else { for (let i = 0; i < this.jobsData.rows.length; i++) { const { job_title } = this.jobsData.rows[i]; if (value === job_title && i !== currIndex) { cb(new Error('job_title is already exist')) } } cb(); } } return { jobsData: { rows: [] }, formRules: { job_id: [ { validator: validateJobId } ], job_title: [ { validator: validateJobTitle } ] }, currEditData: {} } }, created() { this.fetchData() }, computed: { }, methods: { fetchData() { this.jobsData = { rows: [ { job_id: "FI_ACCOUNT", job_title: "Accountant", max_salary: 9000, min_salary: 4200 }, { job_id: "AD_ASST", job_title: "Administration Assistant", max_salary: 6000, min_salary: 3000, } ] }; for (let i = 0; i < this.jobsData.rows.length; i++) { this.$set(this.jobsData.rows[i], 'status', 'show'); } }, resetJobStatus() { for (let i = 0; i < this.jobsData.rows.length; i++) { this.jobsData.rows[i].status = 'show'; } }, handleEdit(scope) { this.resetJobStatus(); const { $index } = scope; this.currEditData = JSON.parse(JSON.stringify(this.jobsData.rows[$index])); this.jobsData.rows[$index].status = 'edit'; }, save(scope, type) { this.$refs['form'].validate((valid) => { if (valid) { let { $index } = scope; if (type === 'add') { $index = this.jobsData.rows.length - 1; } let job = this.jobsData.rows[$index]; const { job_id, job_title, max_salary, min_salary } = job; if (type === 'modify') { } else if (type === 'add') { } } }); }, cancleSave(scope) { const { $index } = scope; this.jobsData.rows.splice($index, 1, JSON.parse(JSON.stringify(this.currEditData))); this.jobsData.rows[$index].status = 'show'; }, handleAdd() { this.resetJobStatus(); this.jobsData.rows.push({ job_id: '', job_title: '', min_salary: 0, max_salary: 0, status: 'add' }); } } }) </script> </body> </html> 表格进行了排序，点击“add”，插入数据，再点击任意“edit”，可编辑的行显示错误。
 | 1 rain0002009 2019-12-06 16:55:56 +08:00 实验证明 el-table 的默认排序并不改变原数组的顺序，所以你用排序后的 index 来改变原数组的值，哦，你这愚蠢的土拨鼠是要我踢你的屁股吗[doge] |
 | 2 waiaan OP @rain0002009 这翻译得好，我知道是这个原因，但是想不到解决的办法。 |
| 3 waiaan OP 实在不行就只能后端去排了。 |
 | 4 bylh 2019-12-06 17:29:37 +08:00 <el-table-column :key="xxx">给每一个 column 绑定唯一 key 值试一试 |
| 6 rain0002009 2019-12-06 18:39:40 +08:00 亲测，直接用传进来的 scope 就能修改了，写这么复杂，what are you 弄啥咧 |
| 7 waiaan OP @rain0002009 啥？能否贴一下代码？ |
Select Language