vue+iview 实现可编辑表格的示例代码

下面是详细讲解“vue+iview 实现可编辑表格的示例代码”的完整攻略。

简介

在开发一些数据管理系统时，我们经常需要使用到表格来展示数据。同时，为了方便用户操作，我们还需要在表格上实现可编辑的功能。本文将会介绍如何使用vue+iview来实现这个功能。

步骤

安装依赖

首先，我们需要安装vue和iview的依赖：

npm install vue iview --save

引入依赖

在我们的vue组件中，我们需要引入vue和iview的库文件（如果使用了CDN，可以直接在HTML文件中引入）：

import Vue from 'vue'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

添加代码

接下来，我们需要添加一些代码来实现可编辑表格的功能。首先，我们需要定义表格的列：

data () {
  return {
    columns: [
      {
        title: '名称',
        key: 'name',
        editable: true
      },
      {
        title: '年龄',
        key: 'age',
        editable: true
      }
    ],
    data: [
      {
        name: '小明',
        age: 18
      },
      {
        name: '小红',
        age: 19
      }
    ]
  }
}

在这段代码中，我们通过定义columns数组来定义表格的列。每一个列需要包含一个标题和一个键值来指定表格中的数据来自哪里。当editable属性被设置为true时，该列就可以被编辑。

接下来，我们需要将表格和数据绑定起来：

template: `
  <Table :columns="columns" :data="data" :editConfig="{ mode: 'row', trigger: 'click' }"></Table>
`

在这段代码中，我们使用了iview组件库中的Table组件，并且将columns和data分别绑定到了columns和data属性上。我们还将editConfig属性设置为一个对象，用来指定表格的编辑模式和触发方式。

最后，我们需要在vue组件中注册iview：

Vue.use(iView)

示例1：只允许在单元格内编辑

在这个示例中，我们将不再允许用户在整行内编辑，仅允许在单元格内编辑。我们需要修改columns数组，以下是修改后的代码：

columns: [
  {
    title: '名称',
    key: 'name',
    editable: true,
    editRender: (h, { row, column, index }) => {
      return h('Input', {
        props: {
          value: row[column.key]
        },
        on: {
          'on-change': event => {
            row[column.key] = event.target.value
          }
        }
      })
    }
  },
  {
    title: '年龄',
    key: 'age',
    editable: true,
    editRender: (h, { row, column, index }) => {
      return h('InputNumber', {
        props: {
          value: row[column.key]
        },
        on: {
          'on-change': value => {
            row[column.key] = value
          }
        }
      })
    }
  }
],

在这段代码中，我们给每一个editable属性被设置为true的列添加了一个editRender属性，用来自定义单元格内的编辑模式。在这个示例中，我们分别使用了Input和InputNumber组件来分别支持文本和数字的编辑。在双击单元格时，组件将会被渲染到单元格内，用户可以在组件内编辑数据，编辑完成后，单元格会更新数据。

示例2：实现单元格内多选框

在这个示例中，我们需要在单元格内添加多选框，并且允许用户使用多选框来选择数据。以下是代码：

columns: [
  {
    title: '名称',
    key: 'name',
    editable: true,
    editRender: (h, { row, column, index }) => {
      return h('CheckboxGroup', {
        props: {
          value: row[column.key]
        },
        on: {
          'on-change': value => {
            row[column.key] = value
          }
        }
      }, row[column.key].map(item => {
        return h('Checkbox', {
          props: {
            label: item
          }
        }, item)
      }))
    }
  },
  {
    title: '年龄',
    key: 'age',
    editable: true,
    editRender: (h, { row, column, index }) => {
      return h('InputNumber', {
        props: {
          value: row[column.key]
        },
        on: {
          'on-change': value => {
            row[column.key] = value
          }
        }
      })
    }
  }
],
data: [
  {
    name: ['小明'],
    age: 18
  },
  {
    name: ['小红', '小蓝'],
    age: 19
  }
]

在这段代码中，我们给第一列添加了一个editRender属性，并将组件替换为了CheckboxGroup。我们将行数据中的name字段包装成了一个数组，并在多选框内进行了展示，当用户勾选多选框时，name数组的内容将会更新。

结束语

使用vue和iview，实现可编辑表格并不难，只需要几行代码就可以搞定。通过本文中的示例，相信大家已经掌握了如何实现这个功能。在开发过程中，如果遇到问题，可以查看iview的官方文档，上面有更加详细的介绍。