vue table表格行内编辑

最新推荐文章于 2024-07-04 19:32:13 发布

sunlizhen

最新推荐文章于 2024-07-04 19:32:13 发布

阅读量3.6k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sunlizhen/article/details/103672535

版权

这是一个关于Vue组件的示例，展示如何实现表格内的行编辑功能。用户可以点击编辑按钮激活行内编辑，通过输入框修改表格单元格数据，并通过保存和取消按钮进行确认或回退。代码中包括了编辑、保存、取消操作的处理方法，以及调用API接口更新数据。

摘要由CSDN通过智能技术生成

<template>
  <div class="disableLang">
    <div>
      <template slot="header">
        <el-form
          :inline="true"
          :model="formTitle"
          label-position="left"
          ref="formTitle"
        >
          <el-row>
            <el-col :span="1"><xyy-button @click="newIncrease">+新增</xyy-button></el-col>
            <el-col :span="12" class="disableLangInput" v-if ="disableLangInputShow">
              <el-input v-model="formTitle.search"></el-input>
              <xyy-button @click="handelSave">保存</xyy-button>
            </el-col>
          </el-row>
        </el-form>
      </template>

      <template slot="body">
        <div>
          <el-table
            :col="col"
            :data="tableData"
            :list-query="listQuery"
            :operation="operation"
            :offset-top="240"
            @get-data="seachDataList"
          >
            <template slot="words" slot-scope="{col}">
              <el-table-column
                :key="col.index"
                :label="col.name"
                :prop="col.index"
                :width="