笔记：在xt-form中插入el-table表格和在xt-form中插入el-button（基于iview-form）

美丽先生

已于 2022-05-10 16:12:57 修改

阅读量213

点赞数

分类专栏： xt Vue element 文章标签： vue.js elementui 前端

于 2022-05-10 10:19:30 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43780814/article/details/124682203

版权

xt 同时被 3 个专栏收录

43 篇文章

订阅专栏

Vue

15 篇文章

订阅专栏

element

7 篇文章

订阅专栏

这是一个关于前端质检资料的展示页面，采用弹性布局和表格组件，包含编号、名称和操作列。用户可以查看质检资料的详细信息，通过点击操作列的图标进行查看。页面还提供了一个选择开工申请表单的按钮，用于进一步的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

//- 质检资料
.dataBox
  .titleBox 质检资料：
  .tableBox
    el-table(:data="qualityInspectionData" border height="250px")
      el-table-column(label="序号" type="index" align="center" width="80")
      el-table-column(prop="number" label="编号" align="center" min-width="200")
      el-table-column(prop="name" label="名称" align="center" min-width="350")
      el-table-column(label="操作" align="center" width="100")
        template(slot-scope="scope")
          .operate
            i.iconfont.icon-chakan(@click="lookForm(scope.row)")

  .dataBox {
    width: 100%;
    display: flex;
    .titleBox {
      display: flex;
      flex-direction: row-reverse;
      width: 180px;
      padding-right: 10px;
      font-weight: 700;
      font-size: 14px;
      color: #606266;
      letter-spacing: 0.5px;
      line-height: 32px;
    }
    .tableBox {
      width: calc(100% - 180px);
    }
  }

 {
   title: "开工申请：",
   renderContent(h, item, form) {
     return (
       <el-button type="primary" size="small" onClick={() => vm.clickitemizedConstruction(1)}>选择开工申请表单</el-button>
     );
   },
 },