element中template自定义文本后show-overflow-tooltip失效

1,551 阅读1分钟
  • :show-overflow-tooltip="true"改成show-overflow-tooltip
  • template 里的为span 才行
  • 使用v-html是为了将  空格占位符展示出来。如果不涉及到转换为html效果的话,可以在el-table 中配置。时缩略效果也能正常展示,但是如果要使用空格占位符就不行了,  会被解析成文本并在表格列中展示出来,而不是显示空格占位符。
<el-table
        v-loading="listLoading"
        :data="tableData"
        height="300px"
        border
        highlight-current-row
        size="medium"
        class="eltable"
        @selection-change="selectionChangeHandle"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          align="left"
          :label="column.title"
          show-overflow-tooltip
          :width="column.width"
        >
      
          <!-- 
          <template slot-scope="scope">
            <span v-if="column.prop==='personnelInvolvedList'" v-html="clacPerson(scope.row[column.prop])"></span>
            <span v-else v-html="scope.row[column.prop]"></span>
          </template>
          -->
          <template slot-scope="scope">
            <span v-if="column.prop==='personnelInvolvedList'">
              {{ clacPerson(scope.row[column.prop]) }}
            </span>
            <span v-else>{{ scope.row[column.prop] }}</span>
          </template>
        </el-table-column>
      </el-table>
      ````