浅议vue的table里添加时间选择器和input框

       我们用vue开发的时候经常会用到时间选择器和input输入框，相信单独使用的时候我们都能使用得如鱼得水，但要是vue的table里加可能很多同学一开始都很懵逼，反正我是懵逼过，还好最终还是实现了～

        不多说了，直接上代码：

                <el-table :data="tableData" v-model="ruleForm.maindata" max-height="360">
                  <el-table-column type="index" width="50" label="序号"></el-table-column>
                  <el-table-column prop="JE" label="金额输入">
                    <template slot-scope="scope">
                      <el-form-item class="mItem">

                       <el-input ref="input" size='mini v-model="scope.row.JE" @change="changeData(scope.$index, scope.row,)"></el-input>

                      </el-form-item>
                    </template>
                  </el-table-column>
                  <el-table-column prop="NY" label="选择年月">
                    <template slot-scope="scope">
                      <el-form-item class="mItem">
                        <el-date-picker :clearable="false"
                          v-model="scope.row.NY"
                          type="month"
                          value-format="yyyy-MM"
                          format="yyyy-MM"
                          placeholder="">
                        </el-date-picker>
                      </el-form-item>
                    </template>
                  </el-table-column>

                </el-table>

相信代码一出来，同学们都能看得懂。我还是来解释下吧

1、slot-scope="scope"，scope是slot标签上返回了所有的属性值，并且这些属性值是是存放在一个对象里的。其中slot包含了两个属性：index 和 row, 我们可以通过scope.$index取得当前的index值，scope.row取得该行的所有属性值（从而获取到想要指定的属性值）

2、v-model:绑定了input里的值。在列表中我们需要绑定每一行对应的值，理解了第一点后，我们很好绑定值：v-model="scope.row.SXNY"，在input框中，我们还可以通过@change事件来绑定指定的值，也可以不用@change，v-model会自动绑定input里的值。

3、在时间选择中，我通常要对时间进行格式化为：yyyy-MM-dd的格式，element-ui中的日期选择器有很好用的两个属性：value-format 和 format, 其中value-format是对绑定值进行格式化，可以写成value-format：  'yyyy-MM-dd'，若不指定规制的话，该值为默认的data类型。format则是对input框显示格式化，用法和format: 'yyyy-MM-dd'。所有我们完全就可以只用format和value-format完成时间格式转化，而不需要多写@change事件来对值进行格式转化。

希望我的浅议能对你们有所帮助，我也是个菜鸟，有不足的地方望各位大神们指点～