• 【无标题】


    1. <el-button size="mini" type="primary" @click="addHang"
    2. >增加一行</el-button>
    3. <!-- <el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true"> -->
    4. <el-table tooltip-effect="light" :data="addFormData.productList" border
    5. class="table"
    6. style="width: 100%"
    7. :row-style="{ height: '15px' }"
    8. >
    9. <el-table-column label="序号"
    10. type="index"
    11. width="100"
    12. align="center"
    13. >
    14. </el-table-column>
    15. <el-table-column label="名称" prop="productuser" align="center">
    16. <template slot-scope="scope">
    17. <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productuser'"
    18. :rules="addFormRules.productuser" class="all" style="width: 100%;height: 100%;"> -->
    19. <el-input v-model="scope.row.productuser" placeholder="" clearable class="Tinput"></el-input>
    20. <!-- </el-form-item> -->
    21. </template>
    22. </el-table-column>
    23. <el-table-column label="规格型号" prop="productName" align="center">
    24. <template slot-scope="scope">
    25. <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'"
    26. :rules="addFormRules.productName" class="all"> -->
    27. <el-select v-model="scope.row.productName" filterable value-key="id" placeholder="请选择"
    28. @change="pestChange($event, scope.$index)">
    29. <el-option v-for="item in optionsList" :key="item.id" :label="item.productName"
    30. :value="item">
    31. </el-option>
    32. </el-select>
    33. <!-- </el-form-item> -->
    34. </template>
    35. </el-table-column>
    36. <el-table-column label="数量" prop="quantity" align="center">
    37. <template slot-scope="scope">
    38. <!-- <el-form-item size="mini" :prop="'productList.' + scope.$index + '.quantity'"
    39. :rules="addFormRules.quantity" class="all"> -->
    40. <el-input v-model="scope.row.quantity" placeholder="" clearable ></el-input>
    41. <!-- </el-form-item> -->
    42. </template>
    43. </el-table-column>
    44. <el-table-column label="图片" prop="tup" align="center">
    45. <!-- <ImageUpload></ImageUpload> -->
    46. </el-table-column>
    47. <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
    48. width="150">
    49. <template slot-scope="scope">
    50. <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
    51. v-hasPermi="['system:order:edit']">增加</el-button>
    52. <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"
    53. v-hasPermi="['system:order:remove']">删除</el-button>
    54. </template>
    55. </el-table-column> -->
    56. </el-table>
    1. js
    2. data(){
    3. return{
    4. addFormData: {
    5. // 产品列表
    6. productList: [
    7. //默认展示一行,就写一组数据
    8. { productName: '',//规格型号
    9. productuser:'',
    10. quantity:''},
    11. ],
    12. },
    13. }
    14. }
    15. methods: {
    16. //点击按钮添加空行
    17. addHang(){
    18. this.$nextTick(() => {
    19. this.addFormData.productList.push({
    20. productName: '',//规格型号
    21. productuser:'',//名称
    22. quantity:''
    23. })
    24. })
    25. }}
    26. // 再增加一行复用上一行的数据
    27. handleUpdateYes(row) {
    28. //拿到上一行数据再往数组中push()新的数据
    29. this.addFormData.productList.push({
    30. productName: row.productName,//产品名称
    31. price: row.price,//单价(元/㎡)
    32. productCount: row.productCount, //产品件数
    33. totalAmount: '', //小计¥元
    34. })
    35. },
    1. css
    2. <style lang="scss" scoped>
    3. ::v-deep .inputDeep .el-input__inner {
    4. border: none !important;
    5. box-shadow: none !important;
    6. padding: 0px;
    7. }
    8. ::v-deep .textareaDeep .el-textarea__inner {
    9. border: none !important;
    10. box-shadow: none !important;
    11. padding: 0px;
    12. }
    13. ::v-deep .el-select{
    14. width: 100%;
    15. }
    16. ::v-deep .seletDeep .el-input__inner{
    17. border: none !important;
    18. box-shadow: none !important;
    19. padding: 0px;
    20. }
    21. ::v-deep .el-form-item__content {
    22. width: 100%;
    23. height: 100%;
    24. margin:0
    25. }
    26. ::v-deep .all .el-input__inner {
    27. border: none !important;
    28. box-shadow: none !important;
    29. padding: 0px;
    30. border: none !important;
    31. box-shadow: none !important;
    32. padding: 0px;
    33. }
    34. ::v-deep .el-table_1_column_2 is-center .cell{
    35. height: 100%;
    36. }
    37. style>

    效果默认展示一行

    点击按钮可以添加行

  • 相关阅读:
    java基于springboot+vue校园电动自行车管理系统
    ScyllaDB获4300万美元融资,NoSQL数据库市场再掀热潮!
    有个朋友被骗了,大家要擦亮眼睛
    Java计算机毕业设计实验室设备管理系统演示录像2020源码+系统+数据库+lw文档
    独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案!
    黑马C++ 03 提高7 —— STL函数对象
    docker基础篇:安装mysql单机版
    论文翻译 | ITER-RETGEN:利用迭代检索生成协同增强检索增强的大型语言模型
    RuoYi-Vue的中小企业专业化、通用性、低成本的MES系统解决方案
    js方法:函数作为对象的属性
  • 原文地址:https://blog.csdn.net/m0_61265297/article/details/140996904