iview Table编辑行_iviewtable编辑行-优快云博客

本文链接：https://blog.youkuaiyun.com/lonsole/article/details/124700568

本文介绍如何在iview框架中实现表格的编辑行功能，通过JavaScript和前端技术，详细讲解了配置和交互过程，帮助开发者提升用户体验。

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

<template>
  <div>
    <Table :columns="columns" :data="data"></Table>
  </div>
</template>

<script>
export default {
  editIndex: -1,
  editName: "",
  editAge: "",
  editAddress: "",
  data() {
    return {
      editIndex: -1,
      inputValue: "",
      columns: [
        {
          title: "姓名",
          key: "name",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [
                h("Input", {
                  props: {
                    value: row.name,
                  },
                  on: {
                    input: (val) => {
                      this.editName = val;
                    },
                  },
                }),
              ];
            } else {
              edit = row.name;
            }

            return h("div", [edit]);
          },
        },
        {
          title: "年龄",
          key: "age",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [
                h("Input", {
                  props: {
                    value: row.age,
                  },
                  on: {
                    input: (val) => {
                      this.editAge = val;
                    },
                  },
                }),
              ];
            } else {
              edit = row.age;
            }

            return h("div", [edit]);
          },
        },
        {
          title: "地址",
          key: "address",
          render: (h, { row, index }) => {
            let edit;
            if (this.editIndex === index) {
              edit = [
                h("Input", {
                  props: {
                    value: row.address,
                  },
                  on: {
                    input: (val) => {
                      this.editAddress = val;
                    },
                  },
                }),
              ];
            } else {
              edit = row.address;
            }

            return h("div", [edit]);
          },
        },
        {
          title: "操作",
          render: (h, { row, index }) => {
            let edit;
            let control;
            if (this.editIndex === index) {
              return [
                h("Button", {
                  props: {
                    type: "success",
                  },
                  on: {
                    click: () => {
                      this.data[index].name = this.editName;
                      this.data[index].age = this.editAge;
                      this.data[index].address = this.editAddress;
                      this.editIndex = -1;
                    },
                  },
                }, '保存'),
                h('Button', {
                  props:{
                    type:'default'
                  },
                  style:{
                    marginLeft:'6px'
                  },
                  on:{
                    click:() => {
                      this.editIndex = -1
                    }
                  }
                },'取消')
              ];
            } else {
              return h(
                "Button",
                {
                  on: {
                    click: () => {
                      this.editName = row.name;
                      this.editAge = row.age;
                      this.editAddress = row.address;
                      this.editIndex = index;
                    },
                  },
                },
                "修改"
              );
            }
          },
        },
      ],
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
          date: "2016-10-03",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
          date: "2016-10-01",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
          date: "2016-10-02",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
          date: "2016-10-04",
        },
      ],
    };
  },
};
</script>