【无标题】

复制代码
<el-button size="mini" type="primary"  @click="addHang"
      >增加一行</el-button>
    <!-- <el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"> -->
			<el-table tooltip-effect="light" :data="addFormData.productList" border
      class="table"
      style="width: 100%"
      :row-style="{ height: '15px' }"
            >
        <el-table-column label="序号"
          type="index"
          width="100"
          align="center"
          >
        </el-table-column>
        <el-table-column label="名称" prop="productuser"  align="center">
          <template slot-scope="scope">
            <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productuser'"
              :rules="addFormRules.productuser" class="all" style="width: 100%;height: 100%;"> -->
              <el-input   v-model="scope.row.productuser" placeholder="" clearable  class="Tinput"></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
				<el-table-column label="规格型号" prop="productName"  align="center">
					<template slot-scope="scope">
						<!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'"
							:rules="addFormRules.productName" class="all"> -->
							<el-select v-model="scope.row.productName" filterable value-key="id" placeholder="请选择" 
								@change="pestChange($event, scope.$index)">
								<el-option v-for="item in optionsList" :key="item.id" :label="item.productName"
									:value="item">
								</el-option>
							</el-select>
						<!-- </el-form-item> -->
					</template>
				</el-table-column>
        <el-table-column label="数量" prop="quantity"   align="center">
          <template slot-scope="scope">
            <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.quantity'"
              :rules="addFormRules.quantity" class="all"> -->
              <el-input  v-model="scope.row.quantity" placeholder="" clearable ></el-input>
            <!-- </el-form-item> -->
          </template>
        </el-table-column>
        <el-table-column label="图片" prop="tup"   align="center">
            <!-- <ImageUpload></ImageUpload> -->
        </el-table-column>
				<!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="150">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
							v-hasPermi="['system:order:edit']">增加</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"
							v-hasPermi="['system:order:remove']">删除</el-button>
					</template>
				</el-table-column> -->
			</el-table>

js
data(){
    return{
             addFormData: {
				// 产品列表
		    productList: [
//默认展示一行,就写一组数据
              {	productName: '',//规格型号
              productuser:'',
              quantity:''},
                           ],
			   },
    }
}



    methods: {
//点击按钮添加空行
      addHang(){
        this.$nextTick(() => {
			this.addFormData.productList.push({
				productName: '',//规格型号
        productuser:'',//名称
        quantity:''
			})
		})
      }}


    // 再增加一行复用上一行的数据
    handleUpdateYes(row) {
            //拿到上一行数据再往数组中push()新的数据
			this.addFormData.productList.push({
				productName: row.productName,//产品名称
				price: row.price,//单价(元/㎡)
				productCount: row.productCount, //产品件数
				totalAmount: '', //小计¥元
			})
		},

css





<style lang="scss" scoped>
 ::v-deep .inputDeep  .el-input__inner {
  border: none !important;

box-shadow: none !important;

padding: 0px; 

}
 ::v-deep .textareaDeep  .el-textarea__inner {
  border: none !important;

box-shadow: none !important;

padding: 0px; 

}
::v-deep .el-select{
  width: 100%;
}
::v-deep .seletDeep .el-input__inner{
  border: none !important;

box-shadow: none !important;

padding: 0px; 
}
::v-deep .el-form-item__content {
  width: 100%;
  height: 100%;
  margin:0
}
::v-deep .all .el-input__inner {
  border: none !important;

box-shadow: none !important;

padding: 0px; 
border: none !important;

box-shadow: none !important;

padding: 0px; 
}
::v-deep .el-table_1_column_2 is-center .cell{
height: 100%;
}
</style>

效果默认展示一行

点击按钮可以添加行

相关推荐
Ashley的成长之路4 分钟前
前端性能优化实战手册·第1篇:从 Lighthouse 60 到 95 的完整路径
前端·性能优化
思码梁田15 分钟前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css
大尚来也24 分钟前
React Hooks全解析:告别繁琐Class组件
前端·react.js·前端框架
不简说31 分钟前
JS 代码技巧 vol.2 — 20 个数组/对象/字符串/正则的实用技巧
前端·javascript·面试
小小编程路1 小时前
C++ 块作用域详解:从基础到实战
前端·javascript·vue.js
虚惊一场1 小时前
MarkView:纯前端 Markdown 实时预览工具的架构设计
前端·javascript·vue.js
hunterandroid1 小时前
[鸿蒙从零到一] ArkUI 常用布局实战:Column、Row、Stack 与 Flex
前端
海上彼尚1 小时前
Nodejs也能写Agent - 17.LangGraph篇 - Checkpointer 与 Memory
前端·javascript·人工智能·langchain·node.js
盛夏绽放2 小时前
Hermes Agent 全栈安装、配置与Web端架构深度解析(官方命令版·最终优化)
前端·架构·hermes
早期的虫儿有鸟吃2 小时前
Vue3
前端·javascript·vue.js