elementui自定义头部render-header
https://cn.vuejs.org/v2/guide/render-function.html官方api文档。。。参数配置-渲染函数大概效果就是增加模糊搜索。。然后列表展示。这种是直接显示-----<el-table-column><!-- 自定义表头 --><template slot="header" slo...
·
https://cn.vuejs.org/v2/guide/render-function.html 官方api文档。。。参数配置-渲染函数
大概效果就是增加模糊搜索。。然后列表展示。
这种是直接显示-----
<el-table-column >
<!-- 自定义表头 -->
<template slot="header" slot-scope="scope">
<el-dropdown>
<span>
名称
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-input type="text" placeholder="请输入名称" v-model="modal" @input="change" />
<el-dropdown-item v-for="item in tableData" :key="item.id">{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
render-header ---直接添加一个搜索框用户输入然后直接显示
methods: {
renderHeader (h, { column }) {
// 下拉框内容包裹在一个div里面
return h(
'el-dropdown', [
h(
'span', {
domProps: {
innerHTML: '名称<i class="el-icon-arrow-down el-icon--right"></i>'
}
},
),
h(
'el-dropdown-menu', {
slot: 'dropdown'
}, [
h('el-input', {
props: {
value: '',
placeholder: '请输入名称'
},
on: {
input: value => {
console.log(value);
// console.log(this.$store.state)
// this.SET_APPLABS('')
// console.log(this.projectsData.app_labs)
// this.$store.state.projectsData.app_labssplice(0, 1)
// this.projectsData.app_labs.splice(0, 1)
}
}
})
]
)
]
)
},
更多推荐
已为社区贡献13条内容
所有评论(0)