table行内编辑,校验时间

<el-table  :data="dataList" border>
    <el-table-column label="开始时间" align="center">
      <template  slot-scope="{row,$index}">
        <el-date-picker
          size="mini"
          style="width: 80%;"
          v-model="row.startDate"
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptionsRowStart(row,$index)"
          placeholder="开始时间">
        </el-date-picker>
      </template>

    </el-table-column>
    <el-table-column label="结束时间" align="center">
      <template slot-scope="{row,$index}">
        <el-date-picker
          size="mini"
          style="width: 80%;"
          v-model="row.endDate"
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptionsRowEnd(row,$index)"
          placeholder="质保结束时间">
        </el-date-picker>
      </template>
    </el-table-column>
</el-table>
export default {
    name: "",
    data(){
      return{
        dataList:[
            {startDate:'',endDate:''}
        ],
        pickerOptionsRowStart:(row,index) =>{
          return{
            disabledDate: time => {
              let endDateVal = this.dataList[index].endDate
              if (endDateVal) {
                return time.getTime() > new Date(endDateVal).getTime()
              }
            }
          }

        },
        pickerOptionsRowEnd:(row,index) => {
          return{
            disabledDate: time => {
              let beginDateVal = this.dataList[index].startDate
              if (beginDateVal) {
                return time.getTime() < new Date(beginDateVal).getTime()
              }
            }
          }

        },
      }
    },
    components:{
    },
    methods : {
    },
    mounted(){
    }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
el-table 行内编辑是一种非常方便的功能,可以让用户直接在表格修改数据,而不需要跳转到新的页面,提高了用户的工作效率。在 el-table ,用户可以通过单击某一行,将其变为编辑状态,然后直接在单元格内输入修改后的数据,最后确认修改或取消编辑。 为了实现 el-table 行内编辑功能,我们需要通过设置 el-table 的 edit-config 属性来进行配置。具体来说,我们需要指定 edit-config 的 type 为 "cell",表示用户是在单元格内编辑。同时,还可以设置可编辑单元格的属性,如可以编辑的数据类型、最大值、最小值等。 除了 edit-config 属性外,我们还需要设置 el-table-column 的 editable 属性,来确定哪些列是可以编辑的。如果没有设置这个属性,默认情况下所有列都是不可编辑的。 当用户开始编辑某一行时,可以通过设置 row.editing 属性为 true,来使得这一行进入编辑状态。当用户编辑完毕后,可以通过自定义事件来触发保存数据的操作,比如可以使用 $emit() 方法来触发一个自定义事件,让父组件来处理编辑后的数据。另外,如果用户想要取消正在编辑的行,可以点击表格外的空白处,或者点击取消编辑的按钮,这样就可以让行恢复到非编辑状态。 总的来说,el-table 行内编辑是一种非常实用的功能,可以大大提高用户的工作效率,让他们能够更方便地编辑和修改数据。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值