浅议vue的table里添加时间选择器和input框
我们用vue开发的时候经常会用到时间选择器和input输入框,相信单独使用的时候我们都能使用得如鱼得水,但要是vue的table里加可能很多同学一开始都很懵逼,反正我是懵逼过,还好最终还是实现了~ 不多说了,直接上代码: <el-table :data="tableData" v-model="r
我们用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事件来对值进行格式转化。
希望我的浅议能对你们有所帮助,我也是个菜鸟,有不足的地方望各位大神们指点~
更多推荐
所有评论(0)