我们用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事件来对值进行格式转化。

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


Logo

前往低代码交流专区

更多推荐