Vue — iview 可编辑表格案例

>[success] # iview 可编辑表格案例 ~~~ 1.这个案例需要自行安装iview Ui 组件库 2.iview的table 和 ele的table 略有区别，iview的table 组件需要使用render函数去渲染 ~~~ >[info] ## 对iview--table 二次封装的案例 * 实现效果 可以直接改变某列的数据  >[danger] ##### 封装的目录结构 ~~~ │ ├── 'components' // 存放组件文件夹 │ │ └── 'edit-table' // 存放对iview 二次封装文件 │ │ └─ 'edit-table.vue' // 对iview-table 组件二次封装自定义组存放位置 │ │ └─ 'index.js' // 入口文件 ~~~ >[danger] ##### 对edit-table.vue 封装 ~~~ 1.再对iview - tbale 进行二次封装的时候，需要简单的看一下api 使用说明 这里将下面需要的主要说明简单提取出来，方便理解 1.1.iview table配置和ele 不同，ele列配置需要我们使用ele-table提供的 'el-table-column' 组件，但iview 只需要你传递配置参数columns 1.2.iview-table 留出render 函数渲染模式的，在定制上更趋于数据驱动 2.组件的参数说明props中： 2.1.columns -- 接受父组件的iview-table 列的配置项 2.2 value -- 接受iview-table数据展示 3.二次封装的设想构建，首先想做一个可编辑列的table，因此需要对我们， 对传入组件进行配置的columns 参数进行二次加工，这里的做法增加一个 配置参数'editable' 来判断当前列是否可以进行编辑 4.是否可以编辑在应该在dom渲染的时候就进行对应的操作因此选 择'mounted' 的生命周期去做操作 5.操作数据 和 实际数据要进行深copy进行区分这里使用了'clonedeep'这个 插件 6.一共向外暴露两个方法一个是input 因为v-model 语法糖原因，所以需要父 子组件相互传递暴露出去 7.一个是'on-edit' 让用户拿到编辑数据 ~~~ ~~~ ~~~ >[danger] ##### 使用 ~~~ 1.editable 是我们自己自定义的配置项 ~~~ ~~~ ~~~