iview组件使用Table表格，开启单元格编辑功能

最新推荐文章于 2024-07-25 19:46:11 发布

小蜜蜂dyh

最新推荐文章于 2024-07-25 19:46:11 发布

阅读量2k

点赞数 1

分类专栏： vue项目iview组件文章标签： vue vue.js

本文链接：https://blog.csdn.net/qq_38897823/article/details/109811724

版权

该博客介绍了如何在iview的Table组件中启用单元格编辑功能，提供了详细的实践经验和示例代码，帮助读者理解并应用到自己的vue项目中。

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

iview组件使用Table表格，开启单元格编辑功能

前言

提示：iview官方文档Table介绍有限，鄙人在这加以说明，有不足的地方望大家指出

提示：以下是项目中实践的经验，下面案例可供参考

一、开启单元格编辑功能

1.最终示例：

在这里插入图片描述

2.实现：

首先，你得先定义一个Table（示例）：

<Table :columns="columns1" :data="data1" border></Table>

在data里面定义columns（示例）：

export default {
   
        name: 'branch-kpi-apply-detail',
        data () {
   
          return {
   
            pageCode: 'kpiApplyDetail',
            columns1: [
              {
   
                title: ' ',
                width: 200,
                align: 'center',
                key: 'subject',
                style: {
   
                  'white-space': 'pre-line'
                },
              },
              {
   
                title: '项目数据',
                width: 190,
                align: 'center',
                key