上海网站建设网站制作,网站后台管理模板psd,网络推广公司电话,乐清网站制作公司电话elementUI table 给表头添加气泡显示#xff08;鼠标悬浮显示注释#xff09; 前言#xff1a;文档显示#xff1a;#xff08;使用插槽#xff0c;我看看到底是怎么个事儿#xff09;文档代码:修改后的效果#xff1a;页面效果#xff1a; 前言#xff1a;
公司出现… elementUI table 给表头添加气泡显示鼠标悬浮显示注释 前言文档显示使用插槽我看看到底是怎么个事儿文档代码:修改后的效果页面效果 前言
公司出现这样的需求产品要求给表格的表头部分字段添加解释说明让用户知道这个字段的详细含义。之前倒是没有遇到过类似的问题并不清楚怎么添加于是去看element UI 组件文档。
element UI 文档
文档显示使用插槽我看看到底是怎么个事儿 文档代码:
templateel-table :datafilterTableData stylewidth: 100%el-table-column labelDate propdate /el-table-column labelName propname /el-table-column alignrighttemplate #header //利用具名插槽对表头进行自定义el-input v-modelsearch sizesmall placeholderType to search //templatetemplate #defaultscope el-button sizesmall clickhandleEdit(scope.$index, scope.row)Edit/el-buttonel-buttonsizesmalltypedangerclickhandleDelete(scope.$index, scope.row)Delete/el-button/template/el-table-column/el-table
/templatescript langts setup
import { computed, ref } from vueinterface User {date: stringname: stringaddress: string
}const search ref()
const filterTableData computed(() tableData.filter((data) !search.value ||data.name.toLowerCase().includes(search.value.toLowerCase()))
)
const handleEdit (index: number, row: User) {console.log(index, row)
}
const handleDelete (index: number, row: User) {console.log(index, row)
}const tableData: User[] [{date: 2016-05-03,name: Tom,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-02,name: John,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-04,name: Morgan,address: No. 189, Grove St, Los Angeles,},{date: 2016-05-01,name: Jessy,address: No. 189, Grove St, Los Angeles,},
]
/script
修改后的效果
templateel-table :datafilterTableData stylewidth: 100%el-table-column propdepartment aligncenter label标**值template #headerspan标**值/span!-- 使用气泡组件展示注释内容--el-tooltip classbox-item effectdark content超出标**值时达到相关等级 placementtop-startel-iconInfoFilled //el-icon/el-tooltip/template/el-table-column/el-table
/template页面效果
