el-ui-积累

el-table-column压缩单行

div

<el-table-column prop="content(替换)" label="内容(替换)" width="300">
    <template v-slot="{ row }">
        <el-tooltip :content="row.content(替换)">
            <div class="oneline" style="text-align: center">{{ row.content(替换) }}</div>
        </el-tooltip>
    </template>
</el-table-column>

style

.oneline {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 1;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}

文本复制

div

<!-- 按钮复制 -->
<el-button size="medium" type="success" plain @click="handleCopy(respData.pass)"> {{ respData.pass }}</el-button>

<!-- 表格复制 -->
<el-table-column prop="st_loginname" label="登录名">
  <template v-slot="{ row }">
    <el-button type="text" size="small" @click="handleCopy(row.st_loginname)">{{ row.st_loginname }}</el-button>
  </template>
</el-table-column>

script

handleCopy(text) {
    if (!text) {
        this.$message.warning('无内容')
        return
    }
    const textarea = document.createElement('textarea')
    textarea.value = text
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    this.$message.success('复制成功')
}