实现＜el-table＞表格内可编辑（多列）

最新推荐文章于 2025-05-15 08:33:00 发布

原创最新推荐文章于 2025-05-15 08:33:00 发布 · 2.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #前端

本文介绍了如何使用ElementUI中的el-table实现表格中特定列的可编辑功能，包括单元格点击切换编辑状态、自动获取焦点以及数据提交和编辑状态管理的详细步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table编辑多列

实现对el-table某几列数据可编辑：

思路如下：

第一，点击单元格时变成可输入状态，离开单元格或者.enter时提交数据，变成不可输入状态；

第二，el-input最好自动获取焦点，失焦时变成不可输入状态；

第三，每个可编辑的列匹配一个是否在编辑状态的字段；

代码如下：

 <el-form :model="formData">
      <el-table :data="formData.tableData" border>
        <el-table-column label="ID" prop="id" align="center" header-align="center"/>
        <el-table-column label="姓名" prop="name" align="center" header-align="center">
          <template #default="{row, $index}">
            <el-form-item :prop="'tableData.'+$index+`.name`">
              <el-input
                v-if="row['isEditname']"
                style="text-align: center;"
                v-model="row.name"
                @blur="blurInput(row, 'isEditname')"
                @keydown.enter="inputNum(row, 'isEditname', 'name', Number(row.name))"
              />
              <span v-else style="display: inline-block;width: 100%;text-align: center;color: #1d61d6;">
                <el-button type="primary" plain text @click="handleEditNum($event, row, 'isEditname')">
                  {{row.name}}
              </el-button>
              </span>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="城市" prop="address" align="center" header-align="center">
          <template #default="{row, $index}">
            <el-form-item :prop="'tableData.'+$index+`.address`">
              <el-input
                v-if="row['isEditaddress']"
                style="text-align: center;"
                v-model="row.address"
                @blur="blurInput(row, 'isEditaddress')"
                @keydown.enter="inputNum(row, 'isEditaddress', 'address', Number(row.address))"
              />
              <span v-else style="display: inline-block;width: 100%;text-align: center;color: #1d61d6;">
                <el-button type="primary" plain text @click="handleEditNum($event, row, 'isEditaddress')">
                  {{row.address}}
              </el-button>
              </span>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" align="center" header-align="center">
          <template #default="{row, $index}">
            <el-form-item :prop="'tableData.'+$index+`.sex`">
              <el-input
                v-if="row['isEditsex']"
                style="text-align: center;"
                v-model="row.sex"
                @blur="blurInput(row, 'isEditsex')"
                @keydown.enter="inputNum(row, 'isEditsex', 'sex', Number(row.sex))"
              />
              <span v-else style="display: inline-block;width: 100%;text-align: center;color: #1d61d6;">
                <el-button type="primary" plain text @click="handleEditNum($event, row, 'isEditsex')">
                  {{row.sex}}
              </el-button>
              </span>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>

const formData = ref({
  tableData :[
    {id: '1', name: '张张', address: '重庆', sex: '男'},
    {id: '2', name: '李李', address: '北京', sex: '女'},
    {id: '3', name: '王王', address: '上海', sex: '男'},
    {id: '4', name: '可可', address: '广州', sex: '女'},
  ]
})
const editProp = ['name', 'address', 'sex']

function inputNum(row, isEditColumn, column, value) {
  row[isEditColumn] = false
  let par = {}
  par[column] = value
  //再将数据提交给后端接口...
}

function blurInput(row, column){
  row[column] = false//不可编辑状态
}

function handleEditNum(e, row, clolumn) {
  row[clolumn] = true//编辑状态
  const parentNode = e.currentTarget.parentElement.parentElement
  nextTick(() => {
    const input = parentNode.querySelector('.el-input__inner')//获取input
    input.focus()//自动获取焦点
  })
}
function handleArr() {
  formData.value.tableData.forEach((item) => {
    let par = {}
    editProp.forEach(editItem =>{
      par[`isEdit${editItem}`] = false
    })
    item = Object.assign(item, par)
  })
  console.log(formData.value.tableData)
}
onMounted(() => {
  handleArr()
})