elementui元件table行內使用vue-treeselect無效？

需要做一個可編輯的表格，使用elementui元件庫中的table控制元件，但是在表格行中使用下拉無效（可使用elementui中的select元件，應該是元件衝突了），又遇到過的嗎？

下拉元件：https://vue-treeselect.js.org/

elementui版本：2.7.2
vue版本：2.5.10

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>    
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <treeselect :normalizer="normalizer" key='treekey123'  
          :clearable="false" :default-expand-level="3" :options="treeData" 
          :multiple="false" placeholder='' :show-count="false" :disable-branch-nodes="false" 
          :alwaysOpen='true'>
        </treeselect>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  name: "login",
  data() {
    return {
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }],
        options: [{
          value: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶'
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍鬚麵'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        normalizer(node) {
          return {
            label: node.label,
            id: node.Id,
            children: node.children
          }
        },
        treeData: [
          {
              "Id": "11111111111111111",
              "ParentId": null,
              "label": "1113",
              "status": 3,
              "children": [
                  {
                      "Id": "22222222222222",
                      "ParentId": "11111111111111111",
                      "label": "1",
                      "status": 3
                  }
              ]
          },
          {
              "Id": "3333333333333",
              "ParentId": null,
              "label": "22",
              "status": 2,
              "children": [
                  {
                      "Id": "4444444444",
                      "ParentId": "3333333333333",
                      "label": "1",
                      "status": 3
                  }
              ]
          }
      ]

    };
  },
  methods: {
   
  }
};
</script>
 

• 754

找到答案了，今天翻看官方文件，發現了一個眼熟的屬性：append-to-body（是不是和 element ui 的dialog 彈框屬性很像？?），設定為true就好，完美解決。

請問append-to-body加在哪裡的

• 2

.el-table{
 overflow: visible;
}
 .el-table .cell{
 overflow: visible;
}
 .el-table__body-wrapper{
 overflow: visible;
}

親測可以

非常感謝！

• 9.4k

.el-table .cell{
  overflow: visible;
}