vue3+element-plus 可编辑列表

最新推荐文章于 2025-01-22 14:19:23 发布

java-刘文

最新推荐文章于 2025-01-22 14:19:23 发布

阅读量546

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_33807175/article/details/134015023

版权

该篇文章介绍了如何在Vue中使用el-table组件实现表格数据的编辑功能，包括列选择性编辑、双击触发input框以及删除操作。展示了表格数据结构和编辑事件的处理逻辑。

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

<template>
  <div class="p-10">
    <el-table :data="tableData" border @cell-dblclick="handleEdit">
      <el-table-column prop="date" label="Date"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="address"  label="address"></el-table-column>
      <el-table-column prop="value"  label="Value"></el-table-column>
      <el-table-column prop="operate" label="Operate">
        <template #default="{ row }">
<!--          <el-button link @click="handleEdit(row)">Edit</el-button>-->
<!--          <el-button type="primary" link @click="handleSave(row)">Save</el-button>-->
          <el-button type="danger" link @click="handleDelete(row)"
          >Delete</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tableData = ref([
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '1'
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '2'
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '3'
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    value: '4'
  }
])
const editIndex = ref(-1)

const handleEdit = (row:any, column:any, cell:any, event:any) => {
  // editIndex.value = tableData.value.indexOf(row)
  console.log(row, column, cell, event);
  // 定义我们要排除的编辑的列，
  let noEditColumns = [];
  // 全表格可编辑的话直接注释下一行即可
  noEditColumns = ["name1", "operate", "priority", "classtypeChinese", "操作"];
  /**
   * 注意对应关系
   * 1、column.property--对应的是我们的数据列名
   * 2、column.label ---对应的是标题的中文名称
   * */
  if (noEditColumns.indexOf(column.property) != -1) {
    return;
  }
  // 记录要编辑的表格，原本的值
  let msg = row[column.property];
  event.target.innerHTML = "";
  // 双击添加input框
  let cellInput = document.createElement("input");
  //设置input框样式及类型
  cellInput.value = msg;
  cellInput.setAttribute("type", "input");
  cellInput.style.width = "80%";
  cellInput.style.height = "30px";
  cellInput.style.paddingLeft = "20px";
  cellInput.style.border = "1px solid #288EFE";
  cellInput.style.borderRadius = "3px";
  cell.appendChild(cellInput);
  // --注意此处需要将焦点设置给cellInput，否则onBlur不好使
  cellInput.focus();
  //为鼠标添加失去焦点事件
  cellInput.onblur = async () => {
    // 判断输入是否为空，为空则删除input
    if (cellInput.value == "") {
      cell.removeChild(cellInput);
      event.target.innerHTML = msg;
    } else {
      cell.removeChild(cellInput);
      // 修改值
      event.target.innerHTML = cellInput.value;
      // 自己的请求在这里书写，下边只是示例
      let form = {
        id: column.property === 'id' ? cellInput.value : row.id,
        date: column.property === 'date' ? cellInput.value : row.date,
        name: column.property === 'name' ? cellInput.value : row.name,
        address: column.property === 'address' ? cellInput.value : row.address,
        value: column.property === 'value' ? cellInput.value : row.value
      }
      console.log(form)
    }
  }
}
</script>