vue 可效验表格实现

  <el-form ref="tableFormRef" :model="tableFormData">
    <el-table :data="tableData" tooltip-effect="light" style="width: 100%">
      <el-table-column type="index" width="70" align="center" label="序号" />
      <el-table-column label="文书名称" prop="data1" align="center" min-width="200">
        <template slot-scope="{ row, column, $index }">
          <el-form-item :prop="`${column.property}-${$index}`" :rules="[{ required: true }]" :show-message="false">
            <el-input v-model="tableFormData[`${column.property}-${$index}`]"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="文书类型" prop="data2" align="center" min-width="200">
        <template slot-scope="{ row, column, $index }">
          <el-form-item :prop="`${column.property}-${$index}`" :rules="[{ required: true }]" :show-message="false">
            <el-select v-model="tableFormData[`${column.property}-${$index}`]" clearable>
              <el-option v-for="(item, index) in [{ value: '01', label: '现象' }]" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" min-width="100">
        <template slot-scope="{ row }">
          <div style="display: flex; justify-content: center">
            <el-button size="mini" type="text" @click="handleEdit(row)" style="font-size: 14px">预览</el-button>
            <el-button size="mini" type="text" class="btn-color" @click="handleEdit(row)" style="font-size: 14px">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  
  
    export default {
      data() {
        return {
          dialogForm: {},
        }
      }
    }
    
.table-list {
    ::v-deep {
      .danger {
        color: #ff4d4f;
      }
      thead {
        th {
          border-bottom: 0;
          color: #646a73 !important;
          font-weight: 400;
        }
        .cell {
          white-space: nowrap;
        }
      }
      .el-form .has-gutter > tr > :nth-child(3) .cell,
      .el-form .has-gutter > tr > :nth-child(2) .cell {
        &::before {
          content: "* ";
          color: red;
        }
      }
      th {
        height: 46px;
        padding: 6px 0;
      }
      td {
        padding: 8px 0;
      }
      .cell {
        padding: 0 16px;
      }
      .el-form-item {
        margin-bottom: 0;
      }
      .el-select {
        width: 100%;
      }
    }
  }

记录方便用到时方便查找,

1. el-form标签放在最外层
2. 表格中的各种输入控件通过tableFormData[${column.property}-${$index}]的方式绑定
3. 可扩展表格单行的表单编辑保存删除等操作
4. 可以进行表单自动校验