element表格组件点击编辑可以编辑此行数据

最新推荐文章于 2024-08-18 16:28:01 发布

46007593

最新推荐文章于 2024-08-18 16:28:01 发布

阅读量1.5k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_46007593/article/details/126507948

版权

该博客介绍了一个使用Vue.js实现的表格组件，允许动态编辑表格的行数据。通过设置行数据的特定属性，并结合v-if指令，实现了当行被选中时显示输入框进行编辑，否则显示静态数据。编辑功能通过点击‘编辑’按钮触发，将当前行的索引保存以控制显示状态。

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

实现效果如图：

思路：在行数据中设置一个属性，用来区分当前行或者当前列是否在进行修改，使用v-if实现

<el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-class-name="tableRowClassName"//此方法
      v-loading="loading"
    >
      <el-table-column label="编号" width="120">
        <template slot-scope="scope">
           //判断
          <div v-if="scope.row.index==tableCli">
            <el-input v-model="scope.row.id"></el-input>
          </div>
          <span v-else>{{scope.row.id}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="title" label="编号"></el-table-column>
      <el-table-column label="分类" prop="categoryId"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="edit(scope.row, scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

<script>
export default {
  name: "sourceSystem",
  data() {
    return {
      //初始化
      tableCli: -1,
      tableData: [
        { id: 1, title: 2, categoryId: 3 },
        { id: 1, title: 2, categoryId: 3 },
        { id: 1, title: 2, categoryId: 3 }
      ],
    };
  },

  methods: {
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    //
    edit(row, index) {
      //console.log(row, index);
      this.tableCli = index.$index;
      //console.log(this.tableCli);
    },
  },
  //
  mounted() {
};
</script>