elementui组件table行内使用vue-treeselect无效？

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>

element-uivue.js

关注3收藏

回复

阅读 4.4k

 

 

3 个回答

得票最新

2

qngyun1029

• 754

发布于 2020-11-19

✓ 已被采纳

找到答案了，今天翻看官方文档，发现了一个眼熟的属性：append-to-body（是不是和 element ui 的dialog 弹框属性很像？?），设置为true就好，完美解决。

 

回复

 

Breath：

请问append-to-body加在哪里的

回复4 月 13 日

2

穿靴子的猫

• 2

发布于 2020-09-28新手上路，请多包涵

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

亲测可以

 

回复

 

qngyun1029：

非常感谢！

回复2020-09-29

 

asseek

• 9.4k

发布于 2020-02-19

 

 

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