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 回复 阅读 4.4k    
3 个回答 得票最新 穿靴子的猫

• 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;
}