快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vue-table表格中使用input框动态添加数据

vue-table表格中使用input框动态添加数据

时间:2022-10-20 20:01:20人气:作者:快盘下载我要评论

vue-table表格中使用input框动态添加数据
html

<els-table
     :columns=;columns;
     :data=;dataTable.foromdata;
      style=;width: 60%
></els--table>

js

  columns: Object.freeze([
        {
          label: ;计划1;,
          prop: ;$index;,
          align: ;center;,
          render: (h, { row, index }) => {
            return (
              <div>
                {row.$index ; 1 ? (
                  <div>{row.$index ; 1}</div>
                ) : (
                  <el-input v-model={row.$index} disabled />
                )}
              </div>
            )
          }
        },
        {
          label: ;计划2;,
          prop: ;annualTaxableIncome;,
          align: ;center;,
          render: (h, { row, index }) => {
            let that = this
            const handleEdits = () => {
              that.handleEditS(row, index)
            }
            return (
              <div>
                {row.annualTaxableIncome && self.dataTable.showSumber ? (
                  <div>{row.annualTaxableIncome}</div>
                ) : (
                  <el-input
                    v-model={row.annualTaxableIncome}
                    disabled={row.annualTaxableIncome == ;无穷大;}
                    maxlength=;100;
                    onblur={handleEdits}
                  />
                )}
              </div>
            )
          }
        },
        {
          label: ;计划3;,
          prop: ;taxRate;,
          align: ;center;,
          render: (h, { row, index }) => {
            let that = this
            const cess= () => {
              that.cess(row, index)
            }
            return (
              <div>
                {row.taxRate  ? (
                  <div>{row.taxRate}</div>
                ) : (
                  <el-input
                    v-model={row.taxRate}
                    onblur={cess}
                    
                  />
                )}
              </div>
            )
          }
        },
        {
          label: ;计划4;,
          prop: ;quickCal;,
          align: ;center;,
          render: (h, { row, index }) => {
            return (
              <div>
                {row.$index ; 1 == 1 ? (
                  0
                ) : (
                  <div>{row.quickCal}</div>
                )}
              </div>
            )
          }
        },
        {
          label: ;操作;,
          align: ;center;,
          render: (h, { row, index }) => {
            let that = this
            const add= () => {
              that.add(row, index)
            }
            const del= () => {
              that.del(row, index)
            }
            return (
              <div>
                {row.annualTaxableIncome == ;无穷大; ? (
                  <i
                    class=;el-icon-circle-plus-outline grens;
                    onClick={add}
                  ></i>
                ) : (
                  <i class=;el-icon-circle-close reds; onClick={del}></i>
                )}
              </div>
            )
          }
        }
      ]), 
      dataTable: {
        foromdata: [
          {
            level: 1,
            annualTaxableIncome: ;无穷大;,
            taxRate: 20,
            quickCa: 2770,
            delFlag: 0
          }
        ]
      }

相关文章

  • Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程

    Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程,vue3 状态管理工具 pinia 使用,Vue3状态管理之Pinia的入门使用教程,Pinia使用详解(vue3默认状态管理),详解Vue3状态管理库Pinia的使用方法,Vue3 使用Pinia状态管理,vue3新一代状态管理器 — pinia的学习与使用,vue3使用pinia管理状态,vue3全家桶之-状态管理器pinia的使用,Vue3中Pinia的基本使用,上手Vue 新的状态管理 Pinia,一篇文章就够了,Pi...
  • vscode无法识别vue文件的问题

    vscode无法识别vue文件的问题,vscode无法识别vue文件的问题...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。