Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.2k views
in Technique[技术] by (71.8m points)

vue + element table的树型表格的实现

我想要根据sonList这个字段来实现,但是不清楚js应该怎么绑定
这是我写的html部分,有很多错误 我拼凑的。。

<el-table
        :data="list"
        v-loading="listLoading"
        element-loading-text="Loading"
        fit
        highlight-current-row
        row-key="list.requireCode"
        border
        default-expand-all
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
         <el-table-column label="名称" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.requireName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代码" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.requireCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.requireType }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字段名" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.fieldName }}</span>

          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link :underline="false" @click="rowClick(scope.row)">
              <i class="el-icon-edit" />
            </el-link>
            <el-link
              :underline="false"
              @click.stop="deleteRequire(scope.$index, scope.row)"
            >
              <i class="el-icon-delete" />
            </el-link>
          </template>
        </el-table-column>
      </el-table>

这是其中的一条数据:
image.png


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
<el-table
        :data="list"
        v-loading="listLoading"
        element-loading-text="Loading"
        fit
        highlight-current-row
        row-key="list.requireCode"
        border
        default-expand-all
        :data="sonList"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >

这里添加 :data="sonList"。建议亲好好看下element文档


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...