【ElementUI】ElementUI Tooltip 根据内容判断是否显示、文字提示自定义样式

封装组件自定义内容

<template><span v-if="['', null, undefined].indexOf(content) === -1"><el-tooltip :content="content" effect="light" placement="bottom" popper-class="tooltip-box"><slot></slot></el-tooltip></span><span v-else><slot></slot></span>
</template><script>
export default {name: "tooltipBox",props: {content: {type: String,default: "",},},
};
</script><style>
.tooltip-box.el-tooltip__popper .popper__arrow {/* 上方箭头 */border-top-color: #e8f4ff !important;/* 下方箭头 */border-bottom-color: #e8f4ff !important;
}.tooltip-box.el-tooltip__popper .popper__arrow:after {border-top-color: #e8f4ff !important;border-bottom-color: #e8f4ff !important;
}/* tooltip主体部分 */
.tooltip-box.el-tooltip__popper {color: #1890ff;background-color: #e8f4ff !important;border-color: #d1e9ff !important;box-shadow: 0px 0px 7px 0px rgba(42, 42, 42, 0.2) !important;
}
</style>

使用封装的组件

import tooltipBox from "./components/tooltipBox";export default {components: {tooltipBox},
}

<el-table-column label="讲课内容" align="center" prop="lectureContent"><template slot-scope="scope"><tooltipBox :content="scope.row.lectureContent"><el-input v-model="scope.row.lectureContent"></el-input></tooltipBox></template>
</el-table-column>