vue el-table里输入框、下拉框校验弹出框提示

table里面有输入框或下拉框,要执行你的方法进行造作之前需要校验

  1. 可以在form里面嵌套表格,参考https://blog.csdn.net/qq_45039940/article/details/122260642
  2. 可以弹出提示框进行提示,如下
 <el-table :data="yourlist" style="width: 100%">
	<el-table-column prop="name" label="物料名称">el-table-column>
	<el-table-column label="数量" >
		<template slot-scope="scope">
			<el-input-number
                  v-model="scope.row.amount"
                  :min="0"
                  size="small"
                  :controls="false" >
			el-input-number>
		template>
	el-table-column>
	<el-table-column label="形状">
		<template slot-scope="scope">
			<el-select
                  v-model="scope.row.shape"
                  placeholder="形状"
			>
				<el-option
					v-for="item in yourdata"
                    :label="item.yourLabel"
                    :value="item.yourvalue">
				el-option>
			el-select>
		template>
el-table-column>            
 check () {
      var result = true
      var message = []
      this.yourlist.forEach((item, index) => {
      if (item.amount == undefined) {
            result = result && false
            message.push(item.name+ " " + '数量不能为空')
          }
      if (item.amount == 0) {
            result = result && false
            message.push(item.name+ " " + '数量不能为0'
           }
      if (item.shape== undefined) {
            result = result && false
            message.push(item.name+ " " + '形状不能为空')
          }
		})
		if (!result) {
			var temp = '';
			message.forEach(v => {
			temp += `
  • ${v}
  • `
    ; }) return this.$notify({ title: '添加物料列表提示', dangerouslyUseHTMLString: true, type: 'warning', duration: 3000, message: `
      ${temp}
    `
    }); } return result }, yourfun(){ let check = this.check() if (check == true) { console.log("true") }else{ console.log("false") } }

    你可能感兴趣的:(vue.js,javascript,前端)