vue + element 实现可编辑列表（超详细)

vue + element 实现可编辑列表（超详细)

1.适用场景

​ 当我们对于主子表数据同时保存的时候，我们又不想做弹窗一条一条的新增子表数据的时候，并且子表数据并不是特别复杂，完全可用table来操作，这种情况下可选择可编辑列表来完成主子表的同时操作。

2.功能简介

​ 基于Tlement-Table编写，并借助于一些表单元素控件。实现表格数据的填写。以及表格操作，包括：新增行，删除行，插入行，上移，下移，置顶，置底等功能。废话不多说直接上代码。

3.页面布局

​ 包含对每一行数据的简单校验。

<template>
  <el-row>
    <el-card>
      <el-row class="text-right m-b">
        <el-button type="primary" @click="handleAdd()">
          添加行
        </el-button>
        <el-button type="danger" plain @click="batchRemove">
          删除行
        </el-button>
        <el-button type="primary" @click="handleInsert">
          插入行
        </el-button>
        <el-button type="primary" @click="handleMove(1)">
          上移
        </el-button>
        <el-button type="primary" @click="handleMove(0)">
          下移
        </el-button>
        <el-button type="primary" @click="handleTopOrBottom(1)">
          置顶
        </el-button>
        <el-button type="primary" @click="handleTopOrBottom(0)">
          置底
        </el-button>
        <el-button type="primary" @click="clearList">
          清空
        </el-button>
      </el-row>
      <el-form ref="form2" :model="submitData" :rules="rules" label-width="150px">
        <el-row :span="24">
          <el-table
            ref="studentTable"
            :data="submitData.studentTableData"
            style="width: 100%"
            highlight-current-row
            stripe
            border
            :row-class-name="tableRowClassName"
            @current-change="currentChange"
            @selection-change="clickLogCheckboxHandler"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
            />
            <el-table-column
              prop="studentCode"
              label="学号"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'studentTableData.'+scope.$index+'.studentCode'" :rules="rules.studentTableDataRules.studentCode" label-width="0">
                  <el-input v-if="scope.row.showFormDom" v-model="scope.row.studentCode"/>
                  <div v-else>
                    {{ scope.row.studentCode }}
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="studentName"
              label="学生姓名"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'studentTableData.'+scope.$index+'.studentName'" :rules="rules.studentTableDataRules.studentName" label-width="0">
                  <el-input v-if="scope.row.showFormDom" v-model="scope.row.studentName"/>
                  <div v-else>
                    {{ scope.row.studentName }}
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="studentAge"
              label="学生年龄"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'studentTableData.'+scope.$index+'.studentAge'" :rules="rules.studentTableDataRules.studentAge" label-width="0">
                  <el-input v-if="scope.row.showFormDom" v-model="scope.row.studentAge"/>
                  <div v-else>
                    {{ scope.row.studentAge }}
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              prop="studentSex"
              label="学生性别"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'studentTableData.'+scope.$index+'.studentSex'" :rules="rules.studentTableDataRules.studentSex" label-width="0">
                  <el-input v-if="scope.row.showFormDom" v-model="scope.row.studentSex"/>
                  <div v-else>
                    {{ scope.row.studentSex }}
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="text-center m-t">
          <el-button type="primary" @click="submitHandler">
            保存
          </el-button>
        </el-row>
      </el-form>
    </el-card>
  </el-row>
</template>

4.数据声明

​

data() {
    return {
	  // 选中的行
      selected: null,
      rowIndex: 0,
      // 提交数据
      submitData: {
        studentTableData: []
      },
	  // 校验信息
      rules: {
        studentTableDataRules: {
          studentName: [
            { required: true, message: '请输入学生姓名', trigger: 'blur' }
          ],
          studentCode: [
            { required: true, message: '请输入学号', trigger: 'blur' }
          ],
          studentAge: [
            { required: true, message: '请输入学生年龄', trigger: 'blur' }
          ],
          studentSex: [
            { required: true, message: '请输入学生性别', trigger: 'blur' }
          ]
        }
      },
	  // 多选情况下多选数据存储
      selecteds: []
    }
  }

5.功能实现

5.1 获取选中的行

注：多选情况。

clickLogCheckboxHandler(selection) {
      this.selecteds = selection
    }

5.2 为row添加索引

注：由于row中获取不到索引值，无法操作数组中的数据，因此增加此方法为row增加索引值。

tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex
    }

5.3 新增行

注：此方法为列表底部新增一行，新增前会执行校验，并且新增行获得高亮；高亮方法为element-ui提供。

handleAdd() {
      const list = {
        studentCode: '',
        studentName: '',
        studentAge: '',
        studentSex: '',
        showFormDom: true
      }
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          if (this.selected !== null) {
            const index = this.selected.row_index
            this.$set(this.submitData.studentTableData[index], 'showFormDom', false)
          }
          this.submitData.studentTableData.push(list)
          this.selected = list
          this.selected.row_index = this.submitData.studentTableData.length - 1
          this.$refs.studentTable.setCurrentRow(this.submitData.studentTableData[this.selected.row_index])
        } else {
          // 此处为验证失败代码
          this.$message.warning('请先为当前行填值！')
        }
      })
    }

5.4 删除行

注：删除当前选中行

batchRemove() {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          if (this.selected !== null) {
            this.submitData.studentTableData.splice(this.selected.row_index, 1)
            this.selected = null
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '请选择要删除的行！',
              type: 'warning'
            })
          }
        })
        .catch(() => {})
    }

5.5 插入行

注：在选中数据上方插入一个空行

handleInsert() {
      if (this.selected !== null) {
        const list = {
          studentCode: '',
          studentName: '',
          studentAge: '',
          studentSex: '',
          showFormDom: true
        }
        if (this.submitData.studentTableData.length > 0) {
          this.$refs['form2'].validate((valid) => {
            if (valid) {
              const index = this.selected.row_index
              this.$set(this.submitData.studentTableData[index], 'showFormDom', false)
              this.submitData.studentTableData.splice(index, 0, list)
              this.selected = list
              this.selected.row_index = index
              this.$refs.studentTable.setCurrentRow(this.submitData.studentTableData[index])
            } else {
              // 此处为验证失败代码
              this.$message.warning('请先为当前行填值！')
            }
          })
        } else {
          this.submitData.studentTableData.push(list)
          this.selected = list
          this.selected.row_index = 0
          this.$refs.studentTable.setCurrentRow(this.submitData.studentTableData[0])
        }
      } else {
        this.$message.warning('请选择插入位置！')
      }
    }

5.6 上移，下移

注：根据传入标识判断上移，下移（1：上移；0：下移）

handleMove(dir) {
      if (this.selected !== null) {
        const moveComm = (curIndex, nextIndex) => {
          const arr = this.submitData.studentTableData
          arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]
          return arr
        }
        this.submitData.studentTableData.some((val, index) => {
          if (val.studentCode === this.selected.studentCode) {
            if (dir === 1 && index === 0) {
              this.$message.warning('已在顶部！')
            } else if (dir === 0 && index === this.submitData.studentTableData.length - 1) {
              this.$message.warning('已在底部！')
            } else {
              const nextIndex = dir === 1 ? index - 1 : index + 1
              this.submitData.studentTableData = moveComm(index, nextIndex)
            }
            return true
          }
          return false
        })
      } else {
        this.$message.warning('请选择操作的行！')
      }
    }

5.7 置顶/置底

注：根据传入标识判断置顶/置底（1：置顶；0：置底）

handleTopOrBottom(dir) {
      if (this.selected !== null) {
        const moveComm = (curIndex, nextIndex) => {
          const arr = this.submitData.studentTableData
          arr[curIndex] = arr.splice(nextIndex, 1, arr[curIndex])[0]
          return arr
        }
        this.submitData.studentTableData.some((val, index) => {
          if (val.studentCode === this.selected.studentCode) {
            if (dir === 1 && index === 0) {
              this.$message.warning('已在顶部！')
            } else if (dir === 0 && index === this.submitData.studentTableData.length - 1) {
              this.$message.warning('已在底部！')
            } else {
              const nextIndex = dir === 1 ? 0 : this.submitData.studentTableData.length - 1
              this.submitData.studentTableData = moveComm(index, nextIndex)
            }
            return true
          }
          return false
        })
      } else {
        this.$message.warning('请选择操作的行！')
      }
    }

5.8 清空列表

注：vue基于数据驱动，清空列表只需要清空列表数组数据即可。

clearList() {
      this.$confirm('确认执行清空操作吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.submitData.studentTableData = []
          this.selected = null
          this.$message({
            message: '清空完成！',
            type: 'success'
          })
        })
    }

5.9 改变列表选中

注：由于这次编写的可编辑列表有这样一个特性，即：选中的行才可以编辑，未选中的行则是只读状态。因此在改变选中时应该增加一些操作。例如：对row.showFormDom的操作。还是直接看代码：

currentChange(newRow, oldRow) {
      if (this.selected !== null) {
        if (newRow.row_index !== this.selected.row_index) {
          this.$refs['form2'].validate((valid) => {
            if (valid) {
              const index = this.selected.row_index
              this.$set(this.submitData.studentTableData[newRow.row_index], 'showFormDom', true)
              this.$set(this.submitData.studentTableData[index], 'showFormDom', false)
              this.selected = newRow
            } else {
              // 此处为验证失败代码
              this.$refs.studentTable.setCurrentRow(this.submitData.studentTableData[this.selected.row_index])
              // this.$message.warning('请先为当前行填值！')
            }
          })
        }
      } else {
        this.$set(this.submitData.studentTableData[newRow.row_index], 'showFormDom', true)
        this.selected = newRow
      }
    }

5.10 最终操作：保存

注：这个应该无须赘述。

submitHandler() {
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          this.$message({
            showClose: true,
            message: '请完善列表中的数据!',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: '请完善列表中的数据!',
            type: 'warning'
          })
        }
      })
    }

6 总结

​ 可编辑列表常用的基本功能大致就想到了这么多，在就是本demo中表单元素均用input实现，对于其他需求，可以替换为其他表单元素控件，例如：select等。也可针对于字段值的改变触发一些特定的方法来实现特定的需求。再就是上移、下移、置顶、置底均用到了studentCode这个属性，那么这个属性应该保持其唯一性，这里没有为其增加唯一性校验，实际开发中应该注意。再就是习惯js的=赋值，在这里很多采用了$set去赋值，有时间我会单独聊一下这样赋值的原因。

​ 最后希望大家开源自己，共同进步。