vue element-ul el-table表格自定义表头(多种实现法)
vue element-ul 表格自定义表头需求:自定义表头,点击出现下拉菜单,如图所示实现一:通过el-table自带的Scoped slot属性(推荐)代码:<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350"><template slot="header" slot-scope="
·
vue element-ul el-table表格自定义表头(推荐Scoped slot,比较清晰)
需求:自定义表头,点击出现下拉菜单,如图所示
实现一:通过el-table自带的Scoped slot属性(推荐)
代码:
<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350">
<template slot="header" slot-scope="scope">
<el-popover placement="bottom" width="200" v-model="visible" popper-class="self-popover" ref="popover">
<el-form ref="form" :model="form" label-width="100px" label-position="top" @submit.native.prevent>
<el-form-item label="是否已安排专属技师" class="radio-checkbox-style">
<el-radio-group v-model="form.rFollowUpFlag">
<el-radio v-for="(item,index) in yesOrNot" :label="item.value">{{item.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="专属技师" prop="staffBaseIdList" v-if="form.rFollowUpFlag">
<el-select class="popover-select" v-model="form.staffBaseIdList" :multiple-limit="multipleLimit" multiple filterable placeholder="请选择" @change="getNormalStoreStaffList">
<el-option v-for="item in staffList" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div v-show="form.rFollowUpFlag!=null">
<el-button type="danger" size="mini" @click="searchClearEvent" round>清空条件</el-button>
<el-button type="primary" size="mini" @click="searchSureEvent" round>确定<i class="el-icon-self el-icon-check el-icon--right"></i></el-button>
</div>
</el-popover>
<div class="head-select-container" slot="reference" v-popover:popover>
<span>专属技师</span>
<el-select popper-class="head-select-popper" class="head-select" v-model="form.staffBaseIdList" :multiple-limit="multipleLimit" multiple filterable placeholder="" @change="getNormalStoreStaffList">
<el-option v-for="item in staffList" :label="item.name" :value="item.id">
</el-option>
</el-select>
</div>
</template>
<template slot-scope="scope">
<template v-if="scope.row.rFollowUpEntityList&&scope.row.rFollowUpEntityList.length>0">
<span class="text-common-blue pointer-style" v-for="(item,index) in scope.row.rFollowUpEntityList" @click="technicianClick(item)">{{index!=0?"、":""}}{{item.staffBaseName}}</span>
</template>
<template v-else>-</template>
</template>
</el-table-column>
实现效果:
代码说明:
1.slot="header"这个属性就可以实现,里面代码正常写就ok
2.有个坑:项目用的af-table-column(基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件),用该组件有个问题是自定义表头和下面渲染数据冲突,所以把af-table-column换回el-table自带的el-table-column就可以了
实现二:通过render-header属性(网上比较多推荐这种,比较繁琐,个人不推荐。。。)
代码:
<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350" :render-header="renderHeader">
<template slot-scope="scope">
<template v-if="scope.row.rFollowUpEntityList&&scope.row.rFollowUpEntityList.length>0">
<span class="text-common-blue pointer-style" v-for="(item,index) in scope.row.rFollowUpEntityList" @click="technicianClick(item)">{{index!=0?"、":""}}{{item.staffBaseName}}</span>
</template>
<template v-else>-</template>
</template>
</el-table-column>
renderHeader(h, {column,$index}, index) {
let optionList = [{text: '选项1','value': "1"}, {text: '选项2','value': "2"}, {text: '选项3','value': "3"}];
return h('div', {}, [
h('span', {}, '专属技师'),//h是creatElement定义的函数,三个参数,一是标签名,二是属性设置,三是值
h('el-popover', {
props: {
placement: 'bottom',
width: '200',
trigger: 'click',
content: '城市价格为该城市所有加盟商价格的最高价'
}
}, [
h('i', {
slot: 'reference',
class: 'el-icon-arrow-down'
}, ''),
h('div', {
class: '',
}, [
h('p', {}, '是否已安排专属技师'),
h('el-checkbox', {}, '是'),
h('el-checkbox', {}, '否'),
h('el-select', {
on: {
input: (value) => { //随着下拉框的不同,文字框里的内容在边
this.logLevel = value;
},
},
props: {
value: this.logLevel, //文字框的内容绑定value
},
}, [
//下拉框里面填充选项
optionList.map(item => {
return h("el-option", {
props: {
value: item.value,
label: item.text
}
})
})
]),
h('el-button', {
props: {
type: 'danger',
size: 'mini',
round: true
}
}, '清空条件'),
h('el-button', {
props: {
type: 'primary',
size: 'mini',
round: true
}
}, '确定'),
])
])
])
}
实现效果:
代码说明:renderHeader函数return出来h是creatElement定义的函数,三个参数,一是标签名,二是属性设置,三是值(如果值还有嵌套html标签可以通过数组实现)
实现三:也是通过render-header属性,直接return出来一个dom,像写js一样
代码:
<el-table-column label="专属技师" prop="rFollowUpEntityList" :min-width="350" :render-header="renderHeader">
<template slot-scope="scope">
<template v-if="scope.row.rFollowUpEntityList&&scope.row.rFollowUpEntityList.length>0">
<span class="text-common-blue pointer-style" v-for="(item,index) in scope.row.rFollowUpEntityList" @click="technicianClick(item)">{{index!=0?"、":""}}{{item.staffBaseName}}</span>
</template>
<template v-else>-</template>
</template>
</el-table-column>
renderHeader() {
return <div>
<el-popover placement="bottom" width="200" popper-class="self-popover" ref="popover">
<el-form ref="form" model="form" label-width="100px" label-position="top" >
<el-form-item label="是否已安排专属技师" class="radio-checkbox-style">
<el-radio-group v-model="form.rFollowUpFlag">
<el-radio v-for="(item,index) in yesOrNot" label="是"></el-radio>
<el-radio v-for="(item,index) in yesOrNot" label="否"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="专属技师" prop="staffBaseIdList" v-if="form.rFollowUpFlag">
<el-select class="popover-select" v-model="form.staffBaseIdList" multiple filterable placeholder="请选择">
<el-option v-for="item in staffList" label="item.name" value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-form>
<div v-show="form.rFollowUpFlag!=null">
<el-button type="danger" size="mini" round>清空条件</el-button>
<el-button type="primary" size="mini" round>确定<i class="el-icon-self el-icon-check el-icon--right"></i></el-button>
</div>
<span slot="reference">专属技师<i class="el-icon-arrow-down"></i></span>
</el-popover>
</div>
}
效果实现:
代码说明:在renderHeader方法直接return出dom,vue里面这种方法比原生js里面简单一点,省了不少字符串的拼接,element ul的组件也可以直接使用,比起第二种还是比较简单的
以上是我实现自定义表头的过程,三种方法可以直接复制代码运行,第一种方法最推荐,希望对和我遇到类似需求的你有一点点帮助,同时也期待大家的指点。
更多推荐
已为社区贡献3条内容
所有评论(0)