在elementUI的表格(table)内嵌入svg图标
在Element UI的表格(Table)中嵌入SVG图标,你可以使用<el-table-column>
的render-header
属性来自定义表头的渲染。以下是一个简单的例子:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180"
:render-header="renderHeader"
>
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
// 其他数据
]
};
},
methods: {
renderHeader(h, { column }) {
return h('span', [
column.label,
h('svg', {
attrs: {
xmlns: 'http://www.w3.org/2000/svg',
width: '16',
height: '16',
viewBox: '0 0 24 24',
fill: 'red',
'aria-hidden': 'true'
},
style: 'margin-left: 5px'
}, [
h('path', {
attrs: {
d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'
}
}),
h('path', {
attrs: {
d: 'M8 12l5 5 5-5h-4V8h4l-5-5-5 5h4v4H8z'
}
})
])
]);
}
}
};
</script>
在这个例子中,我们定义了一个renderHeader
方法,该方法使用Vue的h
函数来创建一个包含文本和SVG图标的表头。h('svg', { attrs: {} }, [h('path', { attrs: { d: '...' } })])
用于创建SVG元素,其中d
属性定义了图标的形状。然后将这个SVG元素添加到表头中。
评论已关闭