ElementUI 树形表格的使用以及表单嵌套树形表格的校验问题等汇总

在ElementUI中使用树形表格，可以通过el-table组件配合el-table-tree实现。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <!-- 嵌套树形结构 -->
    <el-table-column label="配送信息">
      <template slot-scope="scope">
        <el-table
          :data="scope.row.children"
          style="margin-bottom: 0;"
          row-key="id"
          border
          default-expand-all
        >
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              id: 12,
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },
        // ... 更多数据
      ]
    };
  }
};
</script>

对于嵌套表单中的验证问题，可以使用el-form组件配合el-form-item实现，并通过prop属性指定需要验证的字段。以下是一个简单的例子：

<template>
  <el-form :model="form" :rules="rules" ref="form" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
    <el-form-item>
      <el-button type="primary" @click="submitForm('form')">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        username: '',
        // ... 更多字段
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'bl