ant design vue 自定义table表头,ant design vue里表单布局
这篇文章主要介绍了如何使用蚂蚁设计的桌子组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
安装脚手架工具使用Vue CLI新建项目$ slotsTable组件相关源码
安装脚手架工具
新公共管理安装-g @vue/cli
查看@vue/cli版本，vue -V。
使用Vue CLI新建项目
某视频剪辑软件创建antd-演示
下载ant-design-vue，ant-design-vue@2.1.6
新公共管理安装ant-design-vue@next - save
修改main.js，完整引入ant-design-vue所有组件及样式
从“vue”导入{ createApp }
从导入应用程序 App.vue
从“蚂蚁设计”导入Antd
导入" ant-design-vue/dist/antd。CSS”；
createApp(应用程序)。使用(安特).挂载(#应用程序)
修改HelloWorld.vue，使用Antd的Table组件
模板
a-table:数据源=数据源:列=列/
/模板
脚本
导出默认值{
名称：“Helloworld”，
setup() {
返回{
数据源：[
{
键："1",
名称： 胡彦斌，
年龄：32岁，
地址： 西湖区湖底公园一号，
},
{
键："2",
名称： 胡彦祖，
年龄：42岁，
地址： 西湖区湖底公园一号，
},
],
列：[
{
标题： 姓名，
数据索引："名称",
关键字："名称",
},
{
标题： 年龄，
数据索引："年龄",
关键字："年龄",
},
{
标题： 住址，
数据索引："地址",
关键字："地址",
},
],
};
},
};
/脚本
:columns=“columns”，列是一个数组，用于指定列头
数据索引值依次是：姓名、年龄和地址，与数据源每项的姓名、年龄和地址对应标题，数据索引值对应的列头名称姓名，对应的列头名称是姓名年龄，对应的列头名称是年龄地址，对应的列头名称是地址钥匙，Vue需要的钥匙，如果已经设置了唯一的数据索引，可以忽略这个属性：数据源=数据源，指定数据源数据源是一个数组每项的姓名、年龄和地址，与列里数据索引的值：姓名、年龄和地址相对应修改HelloWorld.vue，使用Antd的桌子组件
模板
表答：列=列：数据源=数据
template # name="{ text } "
a{{ text }}/a
/模板
模板#自定义标题
跨度
微笑轮廓/
名字
/span
/模板
template #tags={ text: tags }
跨度
标签
v-for=标记中的标记
:key=tag
:color=tag===失败者?火山：标签长度5?极客蓝:绿色
{{ tag.toUpperCase() }}
/a标签
/span
/模板
模板# action="{ record } "
跨度
aInvite一{{ record.name }}/a
分隔线type=vertical /
aDelete/a
分隔线type=vertical /
蚂蚁下拉链接
更多操作
轮廓分明/
/a
/span
/模板
/a-表格
/模板
脚本语言
从" @ant-design/icons-vue "导入{微笑外轮廓，下轮廓}。
从“vue”导入{定义组件}；
常量列=[
{
数据索引："名称",
关键字："名称",
插槽：{ title: customTitle ，customRender: name }
},
{
标题："年龄",
数据索引："年龄",
关键字："年龄",
},
{
标题：地址，
数据索引："地址",
关键字："地址",
},
{
标题："标签",
关键字："标签",
数据索引："标签",
插槽：{ customRender: tags }，
},
{
标题："动作",
按键："动作",
插槽：{ customRender: action }，
},
];
常量数据=[
{
键："1",
姓名："约翰布朗",
年龄：32岁，
地址："纽约第一湖公园",
标签:[尼斯,开发商],
},
{
键："2",
姓名："吉姆格林",
年龄：42岁，
地址："伦敦第一湖公园",
标签:[失败者],
},
{
密钥："3",
姓名："乔布雷克",
年龄：32岁，
地址："悉尼一号湖公园",
标签:[酷,老师],
},
];
导出默认定义组件({
setup() {
返回{
数据，
列，
};
},
组件：{
微笑着，
轮廓分明，
},
});
/脚本
注意哈，蚂蚁设计-vue表里：数据来源与：数据源是等效的。
要使用时间自定义样式，就有必要了解下某视频剪辑软件里的$老虎机和桌子组件的源码。
$slots
插槽内容可以在这个。$老虎机中看到，举个例子。
组件基本布局
模板
页眉
插槽名称=标题/槽
/页眉
主要的
插槽名称=默认/插槽
/main
页脚
插槽名称=页脚/插槽
/页脚
/模板
脚本
导出默认值{
名称："基础布局"
}
/脚本
App.vue
模板
基线布局
模板#标题
球体是第一部分/p
/模板
模板#默认
球体是第二部分/p
/模板
模板#页脚
球体是第三部分/p
/模板
/BaseLayout
/模板
脚本
从导入基线布局/组件/基本布局。vue ；
导出默认值{
名称："应用程序",
组件：{
基线布局
}
}
/脚本
风格
#app {
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
主页。射流研究…
从“vue”导入{ createApp }
从导入应用程序 App.vue
从“蚂蚁设计”导入Antd
导入" ant-design-vue/dist/antd。CSS”；
createApp(应用程序)。使用(安特).挂载( # app )；
现在我们修改base-layout.vue，使用这个。$老虎机来访问插槽内容。
模板
页眉
插槽名称=标题/槽
/页眉
主要的
插槽名称=默认/插槽
/main
页脚
插槽名称=页脚/插槽
/页脚
/模板
脚本
导出默认值{
名称：基本布局，
已安装：函数(){
控制台。日志(这个)；
console.log(这个$ slots)；
console.log(这个$老虎机。表头)；
console.log(这个$老虎机。header())；
console.log(这个slots.header()[0].El)；
console.log(这个slots.default()[0].El)；
console.log(这个slots.footer()[0].El)；
}
}
/脚本
Table组件相关源码
节点_模块/蚂蚁-设计-vue/es/表格/索引。射流研究…
updateColumns(cols=[]) {
const columns=[]；
const { $slots，$ scopedSlots }=this
cols.forEach(col={
const { slots={}，scopedSlots={}，restProps }=col
常量列={
.restProps，
};
对象.键(插槽)。forEach(key={
const name=slots[key]；
if(column[key]===undefined $ slots[name]){
列[键]=$ slots[名称]。长度===1?$ slots[name][0]:$ slots[name]；
}
});
Object.keys(scopedSlots).forEach(key={
const name=scoped slots[key]；
if(column[key]===undefined $ scopedSlots[name]){
列[key]=$ scoped slots[name]；
}
});
//if(slotScopeNamescopedSlots[slotScopeName]){
//列。自定义渲染=列。自定义渲染 $ scopedSlots[slotScopeName]
//}
if (col.children) {
专栏。孩子=这个。更新列(列。儿童)；
}
列。推(柱)；
});
返回列；
}
只有满足条件(column[key]===undefined $ slots[name])，才能使用作用域插槽来自定义表头。本例中，数据索引："名称"想自定义表头，所以不能定义标题属性，而是在时间属性中定义了标题属性。
node _ modules/ant-design-vue/es/VC-table/src/表格单元。射流研究…
render() {
常数{
记录，
indentSize，
前缀，
缩进，
索引，
膨胀，
列，
组件：体细胞，
}=这个；
const { dataIndex，customRender，className= }=column
const { transformCellText }=this。表；
//如果没有指定数据索引，我们应该返回未定义，但是为了
//为了与目标路径的行为兼容，我们返回记录对象。
让文字；
if(数据类型索引===数字){
text=get(记录，数据索引)；
} else if(！数据索引 数据索引。长度===0){
文本=记录；
}否则{
text=get(记录，数据索引)；
}
让tdProps={
道具：{},
属性：{},
开：{
点击：this.handleClick单击点击，
},
};
让科尔斯潘；
让跨行数
if (customRender) {
text=customRender(文本、记录、索引、列);
if(isinvindrendercelltext(text)){
TD道具。attrs=文本。attrs { }；
TD道具。道具=文字。道具 { }；
TD道具。class=text。类；
TD道具。样式=文本。风格；
colSpan=TD道具。attrs。colSpan
rowSpan=TD props。attrs。rowSpan
文本=文本.儿童
}
}
if (column.customCell) {
tdProps=mergeProps(tdProps，column.customCell(record，index))；
}
//修复https://github.com/ant-design/ant-design/issues/1202
if(isinvindrendercelltext(text)){
文本=空
}
if (transformCellText) {
text=transformCellText({ text，column，record，index })；
}
const indentText=expandIcon？（
跨度
style={ { padding left:` $ { indent size * indent } px ` } }
class={ ` $ { prefix cls }-缩进缩进级别-${indent}`}
/
):空
if (rowSpan===0 colSpan===0) {
返回空
}
if (column.align) {
TD道具。style={ text align:column。对齐，TD道具。style }；
}
const单元类名=类名(类名，column.class，{
[`${prefixCls}-cell-ellipsis`]:专栏。省略号，
//如果有宽度，增加断行处理
//https://github。com/ant-design/ant-design/issues/13825 #问题注释-449889241
[` $ {前缀cls }-cell-break-word `]:列宽，
});
if (column.ellipsis) {
if (typeof text===string) {
TD道具。attrs。标题=文本；
} else if (text) {
//const { props:text props }=text；
//if(文本道具文本道具。儿童类型的文本道具。children=== string ){
//TD道具。attrs。标题=文字道具。儿童；
//}
}
}
返回（
BodyCell class={cellClassName} {.tdProps}
{indentText}
{expandIcon}
{text}
/体细胞
);
}
其中，自定义渲染是渲染函数，用来对表中的值进行自定义渲染。该函数接受四个参数，分别是文本、记录、索引和栏。
antd官网也有自定义渲染的相关说明，如下
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
京公网安备 11010802041100号