一、自定义el-select
1.dom
<el-table :data="tableData" style="min-height:700px; margin-left:10px;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类似上面