el-table存放数据

el-table是Element UI中的一个表格组件，可以用来展示数据。在el-table中存放数据需要通过data属性来指定数据源，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
</el-table>

其中，tableData是一个数组，每个元素代表一行数据，每个元素的属性名对应着el-table-column中的prop属性。

相关问题

动态高度el-table

要实现动态高度的el-table，可以使用element-ui提供的表格slot来自定义表格的内容。具体实现步骤如下：

1. 在el-table中添加一个slot，例如：

   <el-table :data="tableData">
     <el-table-column prop="name" label="姓名"></el-table-column>
     <el-table-column prop="age" label="年龄"></el-table-column>
     <el-table-column prop="address" label="地址"></el-table-column>
     <el-table-column label="自定义内容">
       <template slot-scope="scope">
         <div>{{ scope.row.customContent }}</div>
       </template>
     </el-table-column>
   </el-table>

2. 在数据中添加一个customContent字段，用于存放自定义内容。

3. 在计算自定义内容的高度时，可以使用DOM API中的offsetHeight属性来获取元素的高度，例如：

   mounted() {
     this.tableData.forEach(item => {
       const div = document.createElement('div')
       div.innerHTML = item.customContent
       document.body.appendChild(div)
       item.height = div.offsetHeight
       document.body.removeChild(div)
     })
   }

4. 在el-table中添加一个row-class-name属性，用于设置每一行的class名称，例如：

   <el-table :data="tableData" :row-class-name="rowClassName">
     ...
   </el-table>

5. 在rowClassName方法中返回每一行的class名称，并设置每一行的高度，例如：

   rowClassName({ row }) {
     return `row-${row.id}`
   },

6. 在样式中设置每一行的高度，例如：

   .row-1 {
     height: 50px;
   }
   .row-2 {
     height: 100px;
   }
   ...

el-table做输入校验

el-table做输入校验时，可以在el-table-column中嵌套el-form-item组件，然后在el-form-item中使用el-input或el-select来实现输入校验。你可以按照以下步骤进行操作：
1. 在el-form中定义rules对象，用于存放校验规则。
2. 在el-table中使用el-table-column来定义列，并在其中嵌套el-form-item。
3. 在el-form-item中使用el-input或el-select来接收用户输入，并通过v-model绑定数据。
4. 在el-form-item中设置:prop属性为要校验的数据字段。
5. 在el-form-item中设置:rules属性为对应字段的校验规则。

以下是一个示例代码：

<el-form :model="formData" :rules="formData.rules" ref="formRef">
  <el-table :data="formData.tableData" style="width: 100%">
    <el-table-column prop="name" label="商品名" width="180">
      <template slot-scope="scope">
        <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="formData.rules.name">
          <el-input v-model="scope.row.name"></el-input>
        </el-form-item>
      </template>
    </el-table-column>
  </el-table>
</el-form>

在formData对象中，通过rules属性定义了name字段的校验规则。在el-table-column中，使用slot-scope来获取当前行的数据，并在el-form-item中使用:prop和:rules来设置校验属性。