文章目录
Vue 用createElement 自定义列表头
一、前言
最近产品有需求，想要把一个搜索框放入到列表头中，一般的属性无法满足我们这个需求，所以我们需要使用自定义表头。
现阶段我比较常用的table有 elementUI 的 el-table、umy-ui的u-table和 vxe-table的vxe-grid。
u-table和el-table都有提供 render-header 方便我们自定义表头。而 vxe-table 则提供了更多渲染器可以方便我们进行操作，详情可以看官方文档。这里我主要用的是umy-ui的u-table。
二、需求实现效果
三、知识点
1、createElement 参数
接下来你需要熟悉的是如何在createElement函数中生成模板。这里是createElement接受的参数：
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一个 HTML 标签字符串，组件选项对象，或者一个返回值
// 类型为 String/Object 的函数，必要参数
'div',
// {Object}
// 一个包含模板相关属性的数据对象
// 这样，您可以在 template 中使用这些属性。可选参数。
{
// (详情见下一节)
},
// {String | Array}
// 子节点 (VNodes)，由 `createElement()` 构建而成，
// 或使用字符串来生成“文本节点”。可选参数。
[
'先写一些文字',
createElement('h1', '一则头条'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
深入 data 对象
有一件事要注意：正如在模板语法中，v-bind:class和v-bind:style，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如innerHTML(这会取代v-html指令)。
{
// 和`v-bind:class`一样的 API
'class': {
foo: true,
bar: false
},
// 和`v-bind:style`一样的 API
style: {
color: 'red',
fontSize: '14px'
},
// 正常的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 props
props: {
myProp: 'bar'
},
// DOM 属性
domProps: {
innerHTML: 'baz'
},
// 事件监听器基于 `on`
// 所以不再支持如 `v-on:keyup.enter` 修饰器
// 需要手动匹配 keyCode。
on: {
click: this.clickHandler
},
// 仅对于组件，用于监听原生事件，而不是组件内部使用
// `vm.$emit` 触发的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
// 赋值，因为 Vue 已经自动为你进行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// Scoped slots in the form of
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果组件是其他组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其他特殊顶层属性
key: 'myKey',
ref: 'myRef'
}
2、createElement 创建元素过程
- Vue 利用 createElement 方法创建 VNode，定义在 src/core/vdom/crate-element.js 中:
// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
context: Component,
tag: any,
data: any,
children: any,
normalizationType: any,
alwaysNormalize: boolean
): VNode | Array<VNode> {
// 这些都只是判断，可以无视
if (Array.isArray(data) || isPrimitive(data)) {
normalizationType = children
children = data
data = undefined
}
// 这些都只是判断，可以无视
if (isTrue(alwaysNormalize)) {
normalizationType = ALWAYS_NORMALIZE
}
return _createElement(context, tag, data, children, normalizationType)
}
- createElement 方法实际上是对 _createElement 方法的封装，它允许传入的参数更加灵活，在处理这些参数后，调用真正创建 VNode 的函数 _crateElement :
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
// 只是一些判断，如果出问题了，就创建一个空的元素
if (isDef(data) && isDef((data: any).__ob__)) {
process.env.NODE_ENV !== 'production' && warn(
`Avoid using observed data object as vnode data: ${JSON.stringify(data)}\n +
'Always create fresh vnode data objects in each render!',
context
// 这里\n后面应该有个`，但是不知道为什么会导致整个页面一片红，所以去掉了
)
// 如果传进来的VNodeData为undefined，则返回空元素
return createEmptyVNode()
}
// 获取 VNodeData类型
// object syntax in v-bind
if (isDef(data) && isDef(data.is)) {
tag = data.is
}
if (!tag) {
// in case of component :is set to falsy value
return createEmptyVNode()
}
// 一些判断，可以无视
// warn against non-primitive key
if (process.env.NODE_ENV !== 'production' &&
isDef(data) && isDef(data.key) && !isPrimitive(data.key)
) {
if (!__WEEX__ || !('@binding' in data.key)) {
warn(
'Avoid using non-primitive value as key, ' +
'use string/number value instead.',
context
)
}
}
// support single function children as default scoped slot
if (Array.isArray(children) &&
typeof children[0] === 'function'
) {
data = data || {}
data.scopedSlots = { default: children[0] }
children.length = 0
}
// children 的规范化
//类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。
if (normalizationType === ALWAYS_NORMALIZE) {
// 用户手写的
children = normalizeChildren(children)
} else if (normalizationType === SIMPLE_NORMALIZE) {
// render 函数是编译生成
children = simpleNormalizeChildren(children)
}
// 经过对 children 的规范化，children 变成了一个类型为 VNode 的 Array
let vnode, ns
// 这里先对 tag 做判断，如果是 string 类型，则接着判断如果是内置的一些节点，则直接创建一个普通 VNode，
// 如果是为已注册的组件名，则通过 createComponent 创建一个组件类型的 VNode，否则创建一个未知的标签的 VNode。
//如果是 tag 一个 Component 类型，则直接调用 createComponent 创建一个组件类型的 VNode 节点。
//对于 createComponent 创建组件类型的 VNode 的过程，之后再去写，本质上它还是返回了一个 VNode。
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
// platform built-in elements
if (process.env.NODE_ENV !== 'production' && isDef(data) && isDef(data.nativeOn) && data.tag !== 'component') {
warn(
`The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
context
)
}
// 如果是 string 类型，则接着判断如果是内置的一些节点，则直接创建一个普通 VNode
vnode = new VNode(
config.parsePlatformTagName(tag), data, children,
undefined, undefined, context
)
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// 是为已注册的组件名，则通过 createComponent 创建一个组件类型的 VNode
// component
vnode = createComponent(Ctor, data, context, children, tag)
} else {
// 否则创建一个未知的标签的 VNode
// unknown or unlisted namespaced elements
// check at runtime because it may get assigned a namespace when its
// parent normalizes children
vnode = new VNode(
tag, data, children,
undefined, undefined, context
)
}
} else {
// 如果是 tag 一个 Component 类型，则直接调用 createComponent 创建一个组件类型的 VNode 节点。
// 这里就是通过createElement 创建组件
// 本质上它还是返回了一个 VNode。
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
if (Array.isArray(vnode)) {
return vnode
} else if (isDef(vnode)) {
if (isDef(ns)) applyNS(vnode, ns)
if (isDef(data)) registerDeepBindings(data)
return vnode
} else {
return createEmptyVNode()
}
}
_createElement这个函数可以提供创建元素和创建组件两个功能。但是我们这里主要看创建元素的功能
// src/core/vdom/crate-element.js
// 创建空元素
export const createEmptyVNode = (text: string = '') => {
const node = new VNode()
node.text = text
node.isComment = true
return node
}
_createElement 方法有 5 个参数：
- context 表示 VNode 的上下文环境，它是 Component 类型；
- tag 表示标签，它可以是一个字符串，也可以是一个 Component；
- data 表示 VNode 的数据，它是一个 VNodeData 类型，可以在 flow/vnode.js 中找到他的定义；
- children 表示当前 VNode 的子节点，它是任意类型的，接下来需要被规范为标准的 VNode 数组；
- normalizationType 表示子节点规范的类型，类型不同规范的方法也就不一样，它主要是参考 render 函数是编译生成的还是用户手写的。
children 的规范化
- 由于 Virtual DOM 实际上是一个树状结构，每一个 VNode 可能会有若干个子节点，这些子节点应该也是 VNode 的类型。_createElement 接收的第 4 个参数 children 是任意类型的，因为就需要把它们规范成 VNode 类型。
- 这里会根据 normalizationType 的不同，调用了 normaliza(children) 和 simpleNormalizeChildren(children) 方法，定义在 src/core/vdom/helpers/normalzie-children.js 中:
// The template compiler attempts to minimize the need for normalization by
// statically analyzing the template at compile time.
//
// For plain HTML markup, normalization can be completely skipped because the
// generated render function is guaranteed to return Array<VNode>. There are
// two cases where extra normalization is needed:
// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
// 当子节点包含组件时 - 因为功能组件可能返回一个数组而不是单个根节点元素。
// 在这种情况下，只需要一个简单的规范化——如果有任何子节点是一个数组，
// 我们用 Array.prototype.concat 将整个事物展平。
// 它保证只有 1 级深度，因为功能组件已经规范了他们自己的子元素。
export function simpleNormalizeChildren (children: any) {
for (let i = 0; i < children.length; i++) {
if (Array.isArray(children[i])) {
return Array.prototype.concat.apply([], children)
}
}
return children
}
// 2. When the children contains constructs that always generated nested Arrays,
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
// 2. 当子元素包含总是生成嵌套数组的构造时，例如 <template>、<slot>、v-for
// 或当子元素是由用户提供的手写渲染函数 / JSX 时。
// 在这种情况下，需要完全规范化以迎合所有可能类型的子值。
export function normalizeChildren (children: any): ?Array<VNode> {
return isPrimitive(children)
? [createTextVNode(children)]
: Array.isArray(children)
? normalizeArrayChildren(children)
: undefined
}
simpleNormalizeChildren 方法调用了场景是 render 函数当函数是编译生成的。理论上编译生成的 children 都已经是 VNode 类型的，但是这里会有一些例外的情况，就是 functional component 函数式组件返回的是一个数组而不是一个根节点，所有会通过 Array.prototype.concat 方法把整个 children 数组打平，让它的深度只有一层。
normalizeChildren 方法的调用场景有 2 中，一个场景是 render 函数是用户手写的，当 children 只有一个节点的时候，Vue 从接口层面允许用户把 children 写成基础类型用来创建单个简单的文本节点，这种情况下回调用 createTextVNode 创建一个文本节点的 VNode；另一个场景就是当编译 slot、 v-for 的时候回产生嵌套数组的情况，回调用 normalizeArrayChildren 方法，先来看一下它是怎么实现的:
function normalizeArrayChildren (children: any, nestedIndex?: string): Array<VNode> {
const res = []
let i, c, lastIndex, last
for (i = 0; i < children.length; i++) {
c = children[i]
if (isUndef(c) || typeof c === 'boolean') continue
lastIndex = res.length - 1
last = res[lastIndex]
// 如果是一个数组类型，则递归调用 normalizeArrayChildren；
// nested
if (Array.isArray(c)) {
if (c.length > 0) {
c = normalizeArrayChildren(c, `${nestedIndex || ''}_${i}`)
// merge adjacent text nodes
if (isTextNode(c[0]) && isTextNode(last)) {
res[lastIndex] = createTextVNode(last.text + (c[0]: any).text)
c.shift()
}
res.push.apply(res, c)
}
} else if (isPrimitive(c)) {
// 如果是基础类型，则通过 createTextVNode 方法转换成 VNode 类型；否则就已经是 VNode 类型了
if (isTextNode(last)) {
// merge adjacent text nodes
// this is necessary for SSR hydration because text nodes are
// essentially merged when rendered to HTML strings
res[lastIndex] = createTextVNode(last.text + c)
} else if (c !== '') {
// convert primitive to vnode
res.push(createTextVNode(c))
}
} else {
// 如果 children 是一个列表并且列表还存在嵌套的情况，则根据 nestedIndex 去更新它的 key
if (isTextNode(c) && isTextNode(last)) {
// merge adjacent text nodes
res[lastIndex] = createTextVNode(last.text + c.text)
} else {
// default key for nested array children (likely generated by v-for)
if (isTrue(children._isVList) &&
isDef(c.tag) &&
isUndef(c.key) &&
isDef(nestedIndex)) {
c.key = `__vlist${nestedIndex}_${i}__`
}
res.push(c)
}
}
}
return res
}
normalizeArrayChildren 接收 2 个参数，children 表示要规范的子节点，nestedIndex 表示嵌套的索引，因为单个 child 可能是一个数组类型。normalizeArrayCHildren 主要的逻辑就是遍历 children，获得单个节点 c，然后对 c 的类型判断
- 如果是一个数组类型，则递归调用 normalizeArrayChildren；
- 如果是基础类型，则通过 createTextVNode 方法转换成 VNode 类型；否则就已经是 VNode 类型了
- 如果 children 是一个列表并且列表还存在嵌套的情况，则根据 nestedIndex 去更新它的 key。
还有需要注意的是，在遍历过程中，对着 3 种情况都做了以下处理: 若果存在两个连续的 text 节点，会把他们合并成一个 text 节点。
经过对 children 的规范化，children 变成了一个类型为 VNode 的 Array。
四、具体实现及代码
1、第一步：创建需要自定义列表头的table
<u-table
v-if="tableName === 'account'"
ref="elTable"
use-virtual
:row-height="20"
:height="getHeight()"
:highlightCurrentRow="false"
:data="dataList"
v-loading="loading"
row-key="id"
@header-dragend="doLayout"
:default-sort="defaultSort"
:border="border"
@selection-change="selectionChange"
@select-all="selectAll"
default-expand-all
:treeConfig="treeConfig"
style="border: 1px solid #ccc; width: 100%"
:row-style="rowClass"
>
<u-table-column
prop=""
label=" "
width="1"
min-width="1"
align="center"
fixed="left"
:tree-node="true"
></u-table-column>
<u-table-column
prop="No"
label=" "
width="50"
min-width="50"
fixed="left"
align="center"
></u-table-column>
<u-table-column
type="selection"
v-if="columnSelection"
align="center"
:selectable="selectable"
fixed="left"
></u-table-column>
<u-table-column
header-align="center"
align="center"
label="操作"
width="80"
min-width="80"
fixed="left"
>
<template slot-scope="scope">
<div>
<el-button
type="text"
size="small"
@click="addFn(scope.row)"
:style="{
display: scope.row.isMatch === false ? 'block' : 'none',
color: scope.row.isAddFn === false ? '' : 'blue',
fontWeight: scope.row.isAddFn === false ? '' : 'bold',
}"
>添加</el-button
>
</div>
<div>
<el-button
type="text"
size="small"
@click="deleteFn(scope.row)"
style="color: red"
:style="{
display: scope.row.isMatch === false ? 'none' : 'block',
}"
>删除 / {{ scope.row.assetIndex }}</el-button
>
</div>
</template>
</u-table-column>
<!-- :formatter="column.formatter" -->
<u-table-column
v-if="getShow(column)"
v-for="(column, index) in tableColumns"
:key="index"
:width="column.width"
:min-width="column.width"
:align="column.align"
header-align="center"
:label="column.label"
:fixed="column.isFrozen"
:render-header="column.isRenderHeader ? column.renderHeader : normalRender"
sortable
:prop="column.prop"
>
<template slot-scope="scope">
<span
v-text="
fieldFormatter(
scope.row,
column.prop,
scope.row[column.prop],
column.type
)
"
></span>
</template>
</u-table-column>
</u-table>
二、第二步：创建自定义组件封装el-popover
<template>
<div class="tooltip">
<!--<el-tooltip effect="dark" placement="top">
<div slot="content">
<p>
{{column.label}}
</p>
</div>
<i class="el-icon-question tooltipIcon" ></i>
</el-tooltip>-->
<el-popover
placement="top-start"
title="标题"
width="400"
trigger="hover"
v-model="visible"
content="资产编码查询">
<!-- 输入类型 -->
<!-- <p>{{column}}</p> -->
<el-row>
<el-col :span="20">
<el-input
v-model="accountParams[column.property]"
:placeholder="'请输入' + `${column.label}`"
@input="changeVal"
clearable
v-if="queryType === 1"
></el-input>
<!-- 日期类型 -->
<el-date-picker
v-model="accountParams[column.property]"
clearable
type="month"
value-format="yyyy-MM"
placeholder="选择日期"
v-if="queryType === 2"
>
</el-date-picker>
</el-col>
<el-col :span="4">
<div class="search-button">
<el-button type="primary" @click="searchAccount()"
>搜 索</el-button
>
</div>
</el-col>
</el-row>
<el-button slot="reference"
circle
style="padding: 4px; top:4px;"
icon="el-icon-search"
@click="click"
>
</el-button>
</el-popover>
</div>
</template>
<script>
export default {
props:{
columnIndex: {
// 序号
type: Number,
default: 0,
},
column: {
// 选择框
type: Object,
default: () => [],
},
queryType: {
type: Number,
default: 0,
}
},
data() {
return {
visible: false,
accountParams: {},
isSub: false,
keepSub: false,
}
},
methods: {
click() {
this.accountParams = {}
this.$emit('search', '1')
this.visible = !this.visible
},
changeVal() {
if (this.isSub) {
this.isSub = '1'
this.$emit('search', this.isSub)
}
},
searchAccount() {
const emitValue = JSON.parse(JSON.stringify(this.accountParams));
this.$emit('getValue', emitValue)
if (this.isSub !== '2') {
this.isSub = '2'
this.$emit('search', this.isSub)
} else {
this.isSub = '3'
this.$emit('search', this.isSub)
}
}
},
};
</script>
<style lang="scss" scope>
.tooltip {
top: 4px;
line-height: 100% !important;
}
.tooltipIcon {
color: #409eff;
// margin-left: 5px;
line-height: 100%;
font-size: 15px;
}
.search-button {
margin-left: 12px;
}
</style>
三、局部注册组件并手写createElement
import w from "@/utils/tableWidth";
import Vue from 'vue'
import columnCheckTip from './columnCheckTip'
Vue.component('check-tip', columnCheckTip)
const searchValue = new Object()
/* 财务账明细 */
export const accountDataCol = [
{
label: "资产编号",
prop: "code",
align: "left",
isShow: true,
isFrozen: false,
width: w.checkTip,
sortable: "custom",
isRenderHeader: true,
renderHeader: function(h, { column, $index }) {
const _this = this
return h(
'div',
{
style: 'line-height: 100%; display: inline-block; padding: 0px'
},
[
h('span', {
// style:'color:#409eff;',
domProps: {
innerHTML: column.label
}
}),
h('check-tip', {
props: {
column: column,
columnIndex: $index,
queryType: 1
},
on: {
getValue: function (value) {
console.log(searchValue, value);
Vue.set(searchValue, 'value', value)
},
search(value) {
console.log(searchValue, value);
Vue.set(searchValue, 'search', value)
}
}
})
],
);
}
},
{
label: "资产名称",
prop: "name",
align: "left",
isShow: true,
isFrozen: false,
width: w.name,
sortable: "custom",
isRenderHeader: true,
renderHeader: function(h, { column, $index }) {
const _this = this
return h(
'div',
{
style: 'line-height: 100%; display: inline-block; padding: 0px'
},
[
h('span', {
// style:'color:#409eff;',
domProps: {
innerHTML: column.label
}
}),
h('check-tip', {
props: {
column: column,
columnIndex: $index,
queryType: 1
},
on: {
getValue: function (value) {
Vue.set(searchValue, 'value', value)
},
search(value) {
Vue.set(searchValue, 'search', value)
}
}
})
],
);
}
},
{
label: "规格型号",
prop: "modelDesc",
align: "right",
isShow: true,
isFrozen: false,
width: w.modelDesc,
sortable: "custom"
},
{
label: "使用人",
prop: "userUserName",
align: "right",
isShow: true,
isFrozen: false,
width: w.createUserName,
sortable: "custom"
},
{
label: "存放地点",
prop: "locationName",
align: "right",
isShow: true,
isFrozen: false,
width: w.locationName,
sortable: "custom"
},
{
label: "取得日期",
prop: "getDate",
align: "center",
isShow: true,
isFrozen: false,
width: w.createTime,
type: "time",
sortable: "custom"
},
{
label: "一级分类",
prop: "maxClassName",
align: "left",
isShow: false,
isFrozen: false,
width: w.classMaxName,
sortable: "custom"
},
{
label: "末级分类",
prop: "minClassName",
align: "left",
isShow: false,
isFrozen: false,
width: w.classMaxName,
sortable: "custom"
},
{
label: "数量",
prop: "assetCount",
align: "right",
isShow: false,
isFrozen: false,
width: w.assetCount,
sortable: "custom"
},
{
label: "使用状况",
prop: "useStatus",
align: "right",
isShow: false,
isFrozen: false,
width: "130",
sortable: "custom"
},
{
label: "使用部门",
prop: "userDeptName",
align: "right",
isShow: false,
isFrozen: false,
width: w.createUserName,
sortable: "custom"
},
{
label: "备注",
prop: "comments",
align: "right",
isShow: false,
isFrozen: false,
width: "130"
},
{
label: "盘点日期",
prop: "checkTime",
align: "center",
isShow: false,
isFrozen: false,
width: w.actionEndTime,
type: "time"
}
];
export {
searchValue
}
至于具体实现，每个公司的架构不同，仅供参考
五、扩展知识点
1、Vue源码9个基础方法
基础判断
function isUndef(v) {
return v === undefined || v === null
}
function isDef(v) {
return v !== undefined && v !== null
}
function isTrue(v) {
return v === true
}
function isFalse(v) {
return v === false
}
检查是否是原始值
function isPrimitive(value) {
return (
typeof value === 'string' ||
typeof value === 'number' ||
// $flow-disable-line
typeof value === 'symbol' ||
typeof value === 'boolean'
)
}
快速对象检查
function isObject(obj) {
return obj !== null && typeof obj === 'object'
}
获取值的原始类型字符串
var _toString = Object.prototype.toString;
function toRawType(value) {
return _toString.call(value).slice(8, -1)
}
严格的对象类型检查
function isPlainObject(obj) {
return _toString.call(obj) === '[object Object]'
}
严格的正则类型检查
function isRegExp(v) {
return _toString.call(v) === '[object RegExp]'
}
检查是否是有效的数组下标
function isValidArrayIndex(val) {
var n = parseFloat(String(val));
return n >= 0 && Math.floor(n) === n && isFinite(val)
}
值转换为实际的字符串
function toString(val) {
return val == null ?
'' :
Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) ?
JSON.stringify(val, null, 2) :
String(val)
}
值转换为数字以进行持久化
function toNumber(val) {
var n = parseFloat(val);
return isNaN(n) ? val : n
}
扫一扫
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
