• vue中用js实现循环可编辑表格

    最近项目中需要实现一个很复杂的表格，尝试用组件写，半天写不出来，循环真的好绕，最后直接求助大哥帮我用原生js写了一个。

    大哥巴拉巴拉讲了半天，先这样在那样，问我懂了吗

    我说懂了！

    大哥说那你写吧我看着。

    我打开vs table 停住。

    大哥说 算了我来吧 你看着。

    躺着真好家人们 我是废物。

    表格的需求：

     简单总结一下就是

    1.表格需要动态，根据输入的数字显示列数 

    2.表格可编辑、可禁用、可计算

    其实单纯表格可编辑是比较简单的，主要是根据输入的年份显示对应的内容，就需要对表格进行循环，我用组件循环的时候总是出现整行或者整列数据都一起变的情况，所以需要找到可以编辑单元格的方法。

    经过测试发现这个表格，原来的大哥也是用js写的，并且写死了30年，你输入之后的年份，也只会出现30年的数据。所以我们直接跟他一样！

    我们可以定义一个对象，之后不断地把内容添加进这个对象就可以。

    首先在data中定义一个对象，即初始化的表格对象。

    前两列的表格我们可以直接写死，从合计开始需要进行循环，所以我们直接从合计开始，合计下再分收入和支出，收入和支出的元素直接根据公式来（改成小写是因为后端接收数据不区分大小写，发大写没用）

    还定义了当前年份count，属性名数组keys，和计算的几个公式。

    1. data () {
    2.   return {
    3.     // 初始化的表格对象
    4.         tableData: {
    5.           "合计": {
    6.             'income': {
    7.               'a': 0.00,
    8.               'h': 0.00,
    9.               'i': 0.00,
    10.               'j': 0.00,
    11.               'k': 0.00,
    12.               'l': 0.00,
    13.               'm': 0.00,
    14.               'b': '--',
    15.               'n': '--',
    16.               'o': '--',
    17.               'p': '--',
    18.               'q': '--',
    19.               'c': 0.00,
    20.               'r': 0.00,
    21.               's': 0.00,
    22.               't': 0.00,
    23.               'd': '--',
    24.               'u': '--',
    25.               'v': '--',
    26.               'w': '--',
    27.               'x': '--',
    28.               'e': '--',
    29.               'f': '--'
    30.             },
    31.             'expend': {
    32.               'a': '--',
    33.               'h': '--',
    34.               'i': '--',
    35.               'j': '--',
    36.               'k': '--',
    37.               'l': '--',
    38.               'm': '--',
    39.               'b': 0.00,
    40.               'n': 0.00,
    41.               'o': 0.00,
    42.               'p': 0.00,
    43.               'q': 0.00,
    44.               'c': '--',
    45.               'r': '--',
    46.               's': '--',
    47.               't': '--',
    48.               'd': 0.00,
    49.               'u': 0.00,
    50.               'v': 0.00,
    51.               'w': 0.00,
    52.               'x': 0.00,
    53.               'e': 0.00,
    54.               'f': 0.00
    55.             }
    56.           },
    57.         },
    58.         // 表格对象属性名数组keys
    59.         keys: [],
    60.         // 填写的年份 默认显示五年
    61.         showYear: 5,
    62.         // 当前年度
    63.         count: new Date().getFullYear(),
    64.         // 收入keys a的计算
    65.         incomeKeys: ['h', 'i', 'k', 'l', 'm'],
    66.         // 支出keys b的计算
    67.         expendKeys: ['n', 'o', 'p', 'q'],
    68.         // 收入keys c的计算
    69.         incomeKeys2: ['r', 's', 't'],
    70.         // 支出keys d的计算
    71.         expendKeys2: ['u', 'v', 'w', 'x']
    72.   }
    73. }

    然后在created中把年份加进去

    1. created() {
    2.       // 在created元素周期就要生成表格
    3.       let tempAttr = null
    4.       // 往tabledata里循环添加30年的数据
    5.       for (let i = 0; i < 30; i++) {
    6.         tempAttr = this.count + i + ''
    7.         this.tableData[tempAttr] = {
    8.           'income': {
    9.             'a': 0.00,
    10.             'h': 0.00,
    11.             'i': 0.00,
    12.             'j': 0.00,
    13.             'k': 0.00,
    14.             'l': 0.00,
    15.             'm': 0.00,
    16.             'b': '--',
    17.             'n': '--',
    18.             'o': '--',
    19.             'p': '--',
    20.             'q': '--',
    21.             'c': 0.00,
    22.             'r': 0.00,
    23.             's': 0.00,
    24.             't': 0.00,
    25.             'd': '--',
    26.             'u': '--',
    27.             'v': '--',
    28.             'w': '--',
    29.             'x': '--',
    30.             'e': '--',
    31.             'f': '--'
    32.           },
    33.           'expend': {
    34.             'a': '--',
    35.             'h': '--',
    36.             'i': '--',
    37.             'j': '--',
    38.             'k': '--',
    39.             'l': '--',
    40.             'm': '--',
    41.             'b': 0.00,
    42.             'n': 0.00,
    43.             'o': 0.00,
    44.             'p': 0.00,
    45.             'q': 0.00,
    46.             'c': '--',
    47.             'r': '--',
    48.             's': '--',
    49.             't': '--',
    50.             'd': 0.00,
    51.             'u': 0.00,
    52.             'v': 0.00,
    53.             'w': 0.00,
    54.             'x': 0.00,
    55.             'e': 0.00,
    56.             'f': 0.00
    57.           },
    58.             // 把年份传给后端 object.values只会获取属性值,所以多加一个year属性
    59.           'year' : tempAttr
    60.         }
    61.       }
    62.       // Object.keys获取对象的属性名赋值给keys
    63.       this.keys = Object.keys(this.tableData)
    64.     },

    到这里我们表格就循环好了，接下来画表格

    1. "overflowX:scroll; overflowY: scroll;height:350px;">
    2.           
    3.           
    4.             
    5.             
    6.               
    7.               
    8.               
    9.               
    10.               
    11.             
    12.             
    13.               
    14.               
    15.             
    16.             
    17.             
    18.               
    19.               
    20.               
    21.               
    22.               
    23.               
    24.             
    25.             
    26.             
    27.               
    28.               
    29.               
    30.               
    31.               
    32.             
    33.             
    34.             
    35.               
    36.               
    37.               
    38.               
    39.               
    40.             
    41.             
    42.             
    43.               
    44.               
    45.               
    46.               
    47.               
    48.             
    49.             
    50.             
    51.               
    52.               
    53.               
    54.               
    55.               
    56.             
    57.             
    58.             
    59.               
    60.               
    61.               
    62.               
    63.               
    64.             
    65.             
    66.             
    67.               
    68.               
    69.               
    70.               
    71.               
    72.             
    73.             
    74.             
    75.               
    76.               
    77.               
    78.               
    79.               
    80.             
    81.             
    82.             
    83.               
    84.               
    85.               
    86.               
    87.               
    88.             
    89.             
    90.             
    91.               
    92.               
    93.               
    94.               
    95.               
    96.             
    97.             
    98.             
    99.               
    100.               
    101.               
    102.               
    103.               
    104.             
    105.             
    106.             
    107.               
    108.               
    109.               
    110.               
    111.               
    112.             
    113.             
    114.             
    115.               
    116.               
    117.               
    118.               
    119.               
    120.             
    121.             
    122.             
    123.               
    124.               
    125.               
    126.               
    127.               
    128.             
    129.             
    130.             
    131.               
    132.               
    133.               
    134.               
    135.               
    136.             
    137.             
    138.             
    139.               
    140.               
    141.               
    142.               
    143.               
    144.             
    145.             
    146.             
    147.               
    148.               
    149.               
    150.               
    151.               
    152.             
    153.             
    154.             
    155.               
    156.               
    157.               
    158.               
    159.               
    160.             
    161.             
    162.             
    163.               
    164.               
    165.               
    166.               
    167.               
    168.             
    169.             
    170.             
    171.               
    172.               
    173.               
    174.               
    175.               
    176.             
    177.             
    178.             
    179.               
    180.               
    181.               
    182.               
    183.               
    184.             
    185.             
    186.             
    187.               
    188.               
    189.               
    190.               
    191.               
    192.             
    193.             
    194.             
    195.               
    196.               
    197.               
    198.               
    199.               
    200.             
    201.           
      202. 收支类别公式合计{{ keys[index - 1] + '年' }}
      {{ index % 2 == 0 ? '支出' : '收入' }}
      一、建设资金来源A=H+I+K+L+M
    202.                 
    203.                 
    204.                   v-model="tableData['合计'].income.a">
    205.               
    206.                 
    207.                   v-model="tableData['合计'].expend.a">
    208.               
    209.                 
    210.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.a">
    211.                 
    212.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.a">
    213.               
      214. （一）财政安排资金H
    214.                 
    215.               
    216.                 
    217.               
    218.                 
    219.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.h">
    220.                 
    221.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.h">
    222.               
      223. （二）地方政府专项债券I
    223.                 
    224.               
    225.                 
    226.               
    227.                 
    228.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.i">
    229.                 
    230.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.i">
    231.               
      232. 其中：用于资本金J
    232.                 
    233.               
    234.                 
    235.               
    236.                 
    237.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.j">
    238.                 
    239.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.j">
    240.               
      241. （三）项目单位市场化融资K
    241.                 
    242.               
    243.                 
    244.               
    245.                 
    246.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.k">
    247.                 
    248.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.k">
    249.               
      250. （四）单位自筹资金L
    250.                 
    251.               
    252.                 
    253.               
    254.                 
    255.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.l">
    256.                 
    257.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.l">
    258.               
      259. （五）其他资金M
    259.                 
    260.               
    261.                 
    262.               
    263.                 
    264.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.m">
    265.                 
    266.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.m">
    267.               
      268. 二、项目建设支出B=N+O+P+Q
    268.                 
    269.               
    270.                 
    271.               
    272.                 
    273.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.b">
    274.                 
    275.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].income.b" >
    276.               
      277. （一）项目建设成本（不含财务费用）N
    277.                 
    278.               
    279.                 
    280.               
    281.                 
    282.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.n">
    283.                 
    284.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].income.n">
    285.               
      286. （二）财务费用-专项债券付息O
    286.                 
    287.               
    288.                 
    289.               
    290.                 
    291.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.o">
    292.                 
    293.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].income.o">
    294.               
      295.  （三）财务费用-市场化融资付息P
    295.                 
    296.               
    297.                 
    298.               
    299.                 
    300.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.p">
    301.                 
    302.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].income.p">
    303.               
      304. （四）其他建设支出Q
    304.                 
    305.               
    306.                 
    307.               
    308.                 
    309.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.q">
    310.                 
    311.                       v-model="tableData[count+ Math.floor((index-1)/2) +''].income.q">
    312.               
      313. 三、项目运营预期收入C=R+S+T
    313.                 
    314.                       v-model="tableData['合计'].income.c">
    315.               
    316.                 
    317.                       v-model="tableData['合计'].expend.c">
    318.               
    319.                 
    320.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.c">
    321.                 
    322.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.c">
    323.               
      324. （一）财政补贴收入R
    324.                 
    325.               
    326.                 
    327.               
    328.                 
    329.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.r">
    330.                 
    331.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.r">
    332.               
      333. （二）项目自身经营收入S
    333.                 
    334.               
    335.                 
    336.               
    337.                 
    338.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.s">
    339.                 
    340.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.s">
    341.               
      342. （三）其他收入T
    342.                 
    343.               
    344.                 
    345.               
    346.                 
    347.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.t">
    348.                 
    349.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.t">
    350.               
      351. 四、项目运营支出D=U+V+W+X
    351.                 
    352.               
    353.                 
    354.               
    355.                 
    356.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.d">
    357.                 
    358.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.d">
    359.               
      360. （一）项目运营成本（不含财务费用）U
    360.                 
    361.               
    362.                 
    363.               
    364.                 
    365.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.u">
    366.                 
    367.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.u">
    368.               
      369. （二）财务费用-专项债券付息V
    369.                 
    370.               
    371.                 
    372.               
    373.                 
    374.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.v">
    375.                 
    376.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.v">
    377.               
      378.  （三）财务费用-市场化融资付息W
    378.                 
    379.               
    380.                 
    381.               
    382.                 
    383.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.w">
    384.                 
    385.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.w">
    386.               
      387. （四）其他运营支出X
    387.                 
    388.               
    389.                 
    390.               
    391.                 
    392.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.x">
    393.                 
    394.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.x">
    395.               
      396. 五、专项债券还本E
    396.                 
    397.               
    398.                 
    399.               
    400.                 
    401.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.e">
    402.                 
    403.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.e">
    404.               
      405. 六、市场化融资还本F
    405.                 
    406.               
    407.                 
    408.               
    409.                 
    410.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].expend.f">
    411.                 
    412.                   v-model="tableData[count+ Math.floor((index-1)/2) +''].income.f">
    413.               
    414.

    • 计算方法写在mounted中，这里本来是打算使用watch进行监听的，结果计算出来太慢了，所以就只能直接修改dom节点了。获取所有的compute类进行操作。（本来是直接获取inout框，后来发现这样的话上面的input框也会变化，就加了类）

    1. mounted() {
    2.       this.getMajorProject()
    3.       // 获取所有class为compute的dom元素节点 遍历监听change事件 当焦点消失的时候数据变化
    4.       document.querySelectorAll('.compute').forEach(target => {
    5.         target.addEventListener('change', () => {
    6.           //年份计算
    7.           // A=H+I+K+L+M
    8.           for (let i = 0; i < this.showYear; i++) {
    9.             this.tableData[this.count + i + ''].income.a=0;
    10.             for (let j = 0; j < this.incomeKeys.length; j++) {
    11.               console.log(this.incomeKeys[j]+this.tableData[this.count + i + ''].income[this.incomeKeys[j]])
    12.               // parseFloat解析字符串返回浮点值
    13.               this.tableData[this.count + i + ''].income.a += parseFloat(this.tableData[this.count + i + ''].income[this.incomeKeys[j]])
    14.             }
    15.           }
    16.           // B=N+O+P+Q
    17.           for (let i = 0; i < this.showYear; i++) {
    18.             this.tableData[this.count + i + ''].expend.b=0;
    19.             for (let j = 0; j < this.expendKeys.length; j++) {
    20.               console.log(this.expendKeys[j]+this.tableData[this.count + i + ''].expend[this.expendKeys[j]])
    21.               this.tableData[this.count + i + ''].expend.b += parseFloat(this.tableData[this.count + i + ''].expend[this.expendKeys[j]])
    22.             }
    23.           }
    24.           // C=R+S+T
    25.           for (let i = 0; i < this.showYear; i++) {
    26.             this.tableData[this.count + i + ''].income.c=0;
    27.             for (let j = 0; j < this.incomeKeys2.length; j++) {
    28.               console.log(this.incomeKeys2[j]+this.tableData[this.count + i + ''].income[this.incomeKeys2[j]])
    29.               this.tableData[this.count + i + ''].income.c += parseFloat(this.tableData[this.count + i + ''].income[this.incomeKeys2[j]])
    30.             }
    31.           }
    32.           // D=U+V+W+X
    33.           for (let i = 0; i < this.showYear; i++) {
    34.             this.tableData[this.count + i + ''].expend.d=0;
    35.             for (let j = 0; j < this.expendKeys2.length; j++) {
    36.               console.log(this.expendKeys2[j]+this.tableData[this.count + i + ''].expend[this.expendKeys2[j]])
    37.               this.tableData[this.count + i + ''].expend.d += parseFloat(this.tableData[this.count + i + ''].expend[this.expendKeys2[j]])
    38.             }
    39.           }
    40.           //合计计算
    41.           // 先置空
    42.           this.tableData['合计'].income.a = 0;
    43.           this.tableData['合计'].income.h = 0;
    44.           this.tableData['合计'].income.i = 0;
    45.           this.tableData['合计'].income.j = 0;
    46.           this.tableData['合计'].income.k = 0;
    47.           this.tableData['合计'].income.l = 0;
    48.           this.tableData['合计'].income.m = 0;
    49.           this.tableData['合计'].expend.b = 0;
    50.           this.tableData['合计'].expend.n = 0;
    51.           this.tableData['合计'].expend.o = 0;
    52.           this.tableData['合计'].expend.p = 0;
    53.           this.tableData['合计'].expend.q = 0;
    54.           this.tableData['合计'].income.c = 0;
    55.           this.tableData['合计'].income.r = 0;
    56.           this.tableData['合计'].income.s = 0;
    57.           this.tableData['合计'].income.t = 0;
    58.           this.tableData['合计'].expend.d = 0;
    59.           this.tableData['合计'].expend.u = 0;
    60.           this.tableData['合计'].expend.v = 0;
    61.           this.tableData['合计'].expend.w = 0;
    62.           this.tableData['合计'].expend.x = 0;
    63.           this.tableData['合计'].expend.e = 0;
    64.           this.tableData['合计'].expend.f = 0;
    65.           for (let i = 0; i < this.showYear; i++) {
    66.             this.tableData['合计'].income.a += parseFloat(this.tableData[this.count + i + ''].income.a);
    67.             this.tableData['合计'].income.h += parseFloat(this.tableData[this.count + i + ''].income.h);
    68.             this.tableData['合计'].income.i += parseFloat(this.tableData[this.count + i + ''].income.i);
    69.             this.tableData['合计'].income.j += parseFloat(this.tableData[this.count + i + ''].income.j);
    70.             this.tableData['合计'].income.k += parseFloat(this.tableData[this.count + i + ''].income.k);
    71.             this.tableData['合计'].income.l += parseFloat(this.tableData[this.count + i + ''].income.l);
    72.             this.tableData['合计'].income.m += parseFloat(this.tableData[this.count + i + ''].income.m);
    73.             this.tableData['合计'].expend.b += parseFloat(this.tableData[this.count + i + ''].expend.b);
    74.             this.tableData['合计'].expend.n += parseFloat(this.tableData[this.count + i + ''].expend.n);
    75.             this.tableData['合计'].expend.o += parseFloat(this.tableData[this.count + i + ''].expend.o);
    76.             this.tableData['合计'].expend.p += parseFloat(this.tableData[this.count + i + ''].expend.p);
    77.             this.tableData['合计'].expend.q += parseFloat(this.tableData[this.count + i + ''].expend.q);
    78.             this.tableData['合计'].income.c += parseFloat(this.tableData[this.count + i + ''].income.c);
    79.             this.tableData['合计'].income.r += parseFloat(this.tableData[this.count + i + ''].income.r);
    80.             this.tableData['合计'].income.s += parseFloat(this.tableData[this.count + i + ''].income.s);
    81.             this.tableData['合计'].income.t += parseFloat(this.tableData[this.count + i + ''].income.t);
    82.             this.tableData['合计'].expend.d += parseFloat(this.tableData[this.count + i + ''].expend.d);
    83.             this.tableData['合计'].expend.u += parseFloat(this.tableData[this.count + i + ''].expend.u);
    84.             this.tableData['合计'].expend.v += parseFloat(this.tableData[this.count + i + ''].expend.v);
    85.             this.tableData['合计'].expend.w += parseFloat(this.tableData[this.count + i + ''].expend.w);
    86.             this.tableData['合计'].expend.x += parseFloat(this.tableData[this.count + i + ''].expend.x);
    87.             this.tableData['合计'].expend.e += parseFloat(this.tableData[this.count + i + ''].expend.e);
    88.             this.tableData['合计'].expend.f += parseFloat(this.tableData[this.count + i + ''].expend.f);
    89.           }
    90.           // 强刷
    91.           this.$forceUpdate()
    92.         })
    93.       })
    94.     },

    可编辑的表格就实现了，我们还需要控制表格只能输入数字，这个功能大哥当然是让我自己做，但我项目要的太急还没来得及做，之后有时间实现一下校验的功能。

    接下来是要根据输入的项目年限（图片上写错了）显示对应的列数。其实说是项目年限，其实项目年限是不能填的，项目年限是建设年限和预算年限的合计。

    所以很简单，我们监听一下建设年限和预算年限，做个加法就行。但是问题又来了，项目是用jeecg写的，v-decorator好像不支持监听，我写了没反应，也可能是我不会。那就直接写change事件。

    得到项目期限之后，需要表格跟着变化，其实就把项目期限的值赋给showYear就行。但是可能是因为有了change事件，项目期限不能再写了，所以最后就直接写在建设和预算的change事件里了。

    还有一个注意点是需要使用数字输入框，这样value才是一个值，直接input，每变化一次，内容都会变化。输入10会被当成1和0。

    1. "24" :sm="12">
    2.           <a-form-item label="建设期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
    3.             
    4.             <a-input-number style="width:100%;"  v-decorator="['constructionPeriod',{initialValue:this.constructionPeriod}]" placeholder="请输入建设期限（年）" @change="changeJsNum" />
    5.           a-form-item>
    6.         
    7.         <a-col :xs="24" :sm="12">
    8.           <a-form-item label="运营期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
    9.             
    10.             <a-input-number style="width:100%;"  v-decorator="['operatingPeriod',{initialValue:this.operatingPeriod}]" placeholder="请输入运营期限（年）" @change="changeYyNum" />
    11.           a-form-item>
    12.         a-col>
    13.         <a-col :xs="24" :sm="12">
    14.           <a-form-item label="项目期限（年）" :labelCol="labelCol" :wrapperCol="wrapperCol">
    15.             
    16.             <a-input-number style="width:100%;" v-decorator="['projectPeriod',{initialValue:this.projectPeriod}]" placeholder="请输入项目期限（年）" disabled  />
    17.           a-form-item>
    18.         a-col>
    1. // 建设年限变化
    2.       changeJsNum (value) {
    3.         // 将值赋给建设年限
    4.         if(value === '' || value === null) {
    5.           this.constructionPeriod = 0
    6.         } else{
    7.           this.constructionPeriod = value
    8.         }
    9.         // 根据预算年限进行项目年限的计算 parseInt:字符串转数字
    10.         if(this.operatingPeriod === ''){
    11.           this.projectPeriod = parseInt(this.constructionPeriod)
    12.         } else {
    13.           this.projectPeriod = parseInt(this.constructionPeriod) + parseInt(this.operatingPeriod)
    14.         }
    15.         // 计算之后 建设或预算年限的value置空（导致项目年限为空）时，项目年限会为字符串0，所以if判断要加上这个
    16.         if(this.projectPeriod && this.projectPeriod!='0'){
    17.           this.showYear = this.projectPeriod
    18.         } else {
    19.           this.showYear = 5
    20.         }
    21.       },
    22.       changeYyNum (value) {
    23.         if(value === ''|| value === null) {
    24.           this.operatingPeriod = 0
    25.         } else{
    26.           this.operatingPeriod = value
    27.         }
    28.         if(this.constructionPeriod === ''){
    29.           this.projectPeriod = parseInt(this.operatingPeriod)
    30.         } else {
    31.           this.projectPeriod = parseInt(this.operatingPeriod) + parseInt(this.constructionPeriod)
    32.         }
    33.         if(this.projectPeriod && this.projectPeriod!='0'){
    34.           this.showYear = this.projectPeriod
    35.         } else {
    36.           this.showYear = 5
    37.         }
    38.       },

    最后给大家看看我的表格！

     项目年限变化，列数变化。

     

     

  • 相关阅读:
    css高频面试题
    IDEA中.gitignore配置不生效的解决方案
    【图像融合】基于双树复小波变换的像素级图像融合算法附matlab代码
    LaTex 控制图片表格位置[h][t][b][htb]等
    并发原理 — CPU原子性指令（一）
    C++求最大公因数(gcd)的六重境界
    Python - 等待异步函数完成
    【YOLOv5入门】目标检测
    Java多线程进阶——常见的锁策略
    超分辨率硕士论文阅读
  • 原文地址：https://blog.csdn.net/weixin_44320032/article/details/126305496