[JavaScript知识库]el-table和el-tabs对应的el-table-column和el-tab-pane元素数据过长的解决方案

el-table

问题：el-table中对应表头和表内内容常常会出现数据过长造成的显示不全或者长度过长等问题
解决：通过el-popover或者el-tooltip文字提示组件去解决
例如下图：

<el-table-column v-for="(item, index) in tableHeadList" :key="index" align="center">
        <!--自定义表头-->
        <template slot="header" slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <span>{{ item.controlName }}</span>
            <div slot="reference" style="overflow:hidden;text-overflow:ellipsis;white-space: nowrap;">
              <span>{{ item.controlName }}</span>
            </div>
          </el-popover>
        </template>
        <!--自定义表格数据-->
        <template slot-scope="scope">
          <span v-for="(j, y) in scope.row.tableDataList" :key="y" v-if="item.controlsId === j.controlsId">{{j.prefix}}</span>
        </template>
      </el-table-column>

el-tabs

问题：el-tabs中对应tab-pane的label名称常常会出现数据过长造成的显示不全或者长度过长等问题
解决：通过el-popover或者el-tooltip文字提示组件去解决
例如下图：

<el-tabs tab-position="left" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in list"
        :label="item.tittle"
        :name="item.id"
        :key="index">
        <el-tooltip slot="label" effect="dark" :content="item.tittle" placement="bottom-start">
          <span>{{ item.tittle }}</span>
        </el-tooltip>
        <child v-if="activeName === item.id" :enrollmentId="item.id" :title="item.tittle"></child>
      </el-tab-pane>
    </el-tabs>