element-ui控制表头显示宽度,搭配el-tooltip鼠标移入提示全部表头

表格代码

//表格数据可自行定义
<el-table v-loading="loading" :data="importnodereportList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" align="center" prop="id" width="150"/>
      <!--重点start-->
      <el-table-column v-for="(item,index) in radios" :key="index" :index="index" :prop="importnodereportList.radioValue" :label="item.dictLabel" align="left" :formatter="radioValueFormat" width="160">
      	<!--主要是用slot="header"搭配tooltip来生成提示内容-->
        <template slot="header" slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="item.dictLabel" placement="left-start">
            <span>{{item.dictLabel}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <!--重点end-->
      <el-table-column label="其他内容" align="center" prop="other" show-overflow-tooltip width="150" />
      <el-table-column label="报备日期" align="center" prop="filingDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.filingDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="节假日" align="center" prop="holiday" :formatter="holidayFormat" />
      <el-table-column label="操作" align="center" class-name="small-padding" width="200">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['discipline:importnodereport:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['discipline:importnodereport:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

css样式代码

//主要用于控制表头宽度,生成省略号
<style lang="scss" scoped>
  /deep/ .cell {
    width: 100%;   /*一定要设置宽度，或者元素内含的百分比*/
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
</style>

js格式化数据

// 格式化有或无按钮
      radioValueFormat(row, column) {
        //写在methods里面,可以拿到行和列的数据,可以根据column.index下标来对行做自己的操作
      },

没改之前

改完之后

• [ 可以修改el-tooltip标签属性来修改提示的位置]

element-ui的	tooltip文字提示组件
上边	top
右边	right
下边	bottom
左边	left
更多位置参数请访问element-ui官方文档
修改el-tooltip提示框宽度,字数过多时可以用到,比如说:好几千字

<style lang="scss">
    .el-tooltip__popper{max-width:80%}
</style>