el-mentUI el-table自定义表头
一、自定义el-select
1.dom
<el-table :data="tableData" style="min-height:700px; margin-left:10px;width:98%;" > <el-table-column label="AA" min-width="230" :prop="aStr" :render-header="renderCustomAttributionHeader" align="center" ></el-table-column> <el-table-column label="BB" min-width="230" :prop="ctr" :render-header="renderCustomAttributionHeader" align="center" ></el-table-column> <el-table-column label="CC" min-width="230" :prop="cStr" :render-header="renderCustomAttributionHeader" align="center" ></el-table-column> </el-table>
2. data数据
data () { return { joinStr: '&-&', // 拼接字符串 lastSelectParams: '', // 最后一次下拉选择 aStr: 'aStr', // a aList: [], aValue: '', // a状态绑定值 bStr: 'bStr', // b bValue: '', // b绑定值 bList: [], cStr: 'cStr', // c cValue: '', // c绑定值 cList: [], queryParams: {aType: '', bType: '', cType: ''} } },
3.实现方法
methods: { // 根据类型返回list listToRenderHeaderType (str) { let list = [] if (str === this.aStr) { // a list = this.aList } else if (str === this.bStr) { // b list = this.bList } else if (str === this.cStr) { // c list = this.cList } return list }, // 绑定value的值 valueToRenderHeaderType (str) { let value = '' if (str === this.aStr) { // a value = this.aValue } else if (str === this.bStr) { // b value = this.bValue } else if (str === this.cStr) { // c value = this.cValue } return value }, // 自定义条线归属表头JSX renderCustomAttributionHeader (h, { column, $index }) { let list = this.listToRenderHeaderType(column.property) let value = this.valueToRenderHeaderType(column.property) return ( <div> <span style="display:block">{column.label}</span> <el-select filterable value={value} onChange={this.handleAttributionCommand} placeholder={`请选择${column.label}`}> {list.map(item => { return ( <el-option key={item.code} label={item.descStr} value={`${item.code}${this.joinStr}${item.descStr}${this.joinStr}${column.property}`}> </el-option> ) })} </el-select> </div> ) }, handleAttributionCommand (val) { let list = val && val.split(this.joinStr) let value = '' if (list && list.length > 2) { let type = list[0] value = list[1] let str = list[2] let params = {} if (this.lastSelectParams) { params = { ...this.lastSelectParams } } else { params = { // ...this.queryParams } } if (str === this.aStr) { // 条件归属 params.aType = type this.aValue = value } else if (str === this.bStr) { // 业务类型 params.bType = type this.bValue = value } else if (str === this.cStr) { // 外呼平台 params.cType = type this.cValue = value } // 调用请求方法 // xxxxxxxxxxxx this.lastSelectParams = params } }, }
二、自定义el-dropdown
3.实现方法,1,2类似上面
将来的自己,会感谢现在不放弃的自己!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现