使用render-header方法,且不使用jsx
实现效果
el-table模板中加render-header
<el-table-column label="**" :render-header="renderSpecNameHeader">
<template slot-scope="scope">
<el-tooltip :content="scope.row.specName" placement="top" effect="light">
<div style="white-space: nowrap;text-overflow: ellipsis;overflow:hidden;"
>{{scope.row.specName}}</div>
</el-tooltip>
</template>
</el-table-column>
模板中的方法
//渲染**的tableheader
renderSpecNameHeader(createElement, { column, $index }) {
let self = this;
//该列的绑定数据
console.log(column);
//列号
console.log($index);
return createElement(
"div",
{
style: "display:flex;"
},
[
createElement("div", {
domProps: {
innerHTML: column.label
}
}),
createElement(SelectHeader, {
style: "cursor: pointer;",
// 组件 prop
props: {
type: "specId",
options: self.specIdOptions, //下拉框选项
defaultValue: self.specId, //默认值
defaultProps: {
value: "specId",
label: "specName"
}
},
// 事件监听器在 `on` 属性内,
// 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
// 需要在处理函数中手动检查 keyCode。
on: {
selectChange: self.selectChange
// click: this.clickHandler
},
// 仅用于组件,用于监听原生事件,而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
// click: this.nativeClickHandler
}
})
]
);
},
//选择框回调
selectChange(){
//写点啥吧
}
SelectHeader.vue文件
<template>
<el-popover placement="bottom" width="180" trigger="click">
<el-select
v-model="value"
placeholder="请选择"
clearable
@change="changeHandler"
>
<el-option
v-for="item in options"
:key="item[defaultProps.value]"
:label="item[defaultProps.label]"
:value="item[defaultProps.value]"
></el-option>
</el-select>
<div slot="reference">
<i class="el-icon-arrow-down"></i>
</div>
</el-popover>
</template>
<script>
export default {
data() {
return {
value: ""
};
},
props: {
type: {
type: String,
default: ""
},
defaultValue:{
type: String,
default: ""
},
options: {
type: Array,
default: function() {
return [];
}
},
defaultProps: {
type: Object,
default: function() {
return {
label: "label",
value: "value"
};
}
}
},
watch:{
defaultValue(newVal,oldVal){
let self = this;
self.value = newVal;
}
},
methods: {
changeHandler() {
let self = this;
self.$emit("selectChange", { type: self.type, value: self.value });
}
}
};
</script>