首页 >> js开发 >> jsAnt-design-vue Table组件customRow属性的使用说明js大全
jsAnt-design-vue Table组件customRow属性的使用说明js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
官网示例官网示例使用方式使用方式
// 表格中加入customRow属性并绑定一个custom方法
rowKey="stockOrderCode"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:customRow="customRow"
>
// methods中定义方法
customRow(record, index) {
return {
// 这个style就是我自定义的属性,也就是官方文档中的props
style: {
// 字体颜色
color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
// 行背景色
'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
// 字体类型
'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
// 下划线
'text-decoration':
record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
// 字体样式-斜体
'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
// 字体样式-斜体
'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',
},
on: {
// 鼠标单击行
click: event => {
// do something
},
},
}
},
// 表格中加入customRow属性并绑定一个custom方法
rowKey="stockOrderCode"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:customRow="customRow"
>
// methods中定义方法
customRow(record, index) {
return {
// 这个style就是我自定义的属性,也就是官方文档中的props
style: {
// 字体颜色
color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
// 行背景色
'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
// 字体类型
'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
// 下划线
'text-decoration':
record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
// 字体样式-斜体
'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
// 字体样式-斜体
'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',
},
on: {
// 鼠标单击行
click: event => {
// do something
},
},
}
},
最终实现的效果最终实现的效果最终实现表格行样式的自定义补充知识:ant-design-vue 中table行 绑定点击事件补充知识:补充知识:ant-design-vue 中table行 绑定点击事件目前在学习使用antd中,需求双击表格行显示pdf,在table中给customRow设置行属性
bordered
:rowSelection="rowSelection"
:columns="columns"
:dataSource="data"
rowKey="id"
:customRow="Rowclick"
:pagination="pagination"
:scroll="{ y: 520 }"
size="small"
>
{{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }}
{{ status == 1 ? "已打印" : "未打印" }}
bordered
:rowSelection="rowSelection"
:columns="columns"
:dataSource="data"
rowKey="id"
:customRow="Rowclick"
:pagination="pagination"
:scroll="{ y: 520 }"
size="small"
>
{{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }}
{{ status == 1 ? "已打印" : "未打印" }}
methods中methods中
Rowclick(record, index) {
return {
on: {
click: () => {},
dblclick: () => {
console.log(record, index, 2222);
this.showPdf = true;
let url = "demo.pdf";
this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
// window.open("/static/pdf/web/viewer.html?file=" + url);
}
}
};
},
Rowclick(record, index) {
return {
on: {
click: () => {},
dblclick: () => {
console.log(record, index, 2222);
this.showPdf = true;
let url = "demo.pdf";
this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
// window.open("/static/pdf/web/viewer.html?file=" + url);
}
}
};
},以上这篇Ant-design-vue Table组件customRow属性的使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考。
// 表格中加入customRow属性并绑定一个custom方法
rowKey="stockOrderCode"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:customRow="customRow"
>
// methods中定义方法
customRow(record, index) {
return {
// 这个style就是我自定义的属性,也就是官方文档中的props
style: {
// 字体颜色
color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
// 行背景色
'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
// 字体类型
'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
// 下划线
'text-decoration':
record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
// 字体样式-斜体
'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
// 字体样式-斜体
'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',
},
on: {
// 鼠标单击行
click: event => {
// do something
},
},
}
},
// 表格中加入customRow属性并绑定一个custom方法
rowKey="stockOrderCode"
:columns="columns"
:dataSource="dataSource"
:pagination="pagination"
:customRow="customRow"
>
// methods中定义方法
customRow(record, index) {
return {
// 这个style就是我自定义的属性,也就是官方文档中的props
style: {
// 字体颜色
color: record.remarkDesc ? record.remarkDesc.fontColor : 'rgba(0, 0, 0, 0.65)',
// 行背景色
'background-color': record.remarkDesc ? record.remarkDesc.bgColor : '#ffffff',
// 字体类型
'font-family': record.remarkDesc ? record.remarkDesc.fontType : 'Microsoft YaHei',
// 下划线
'text-decoration':
record.remarkDesc && record.remarkDesc.underline ? 'underline' : 'unset',
// 字体样式-斜体
'font-style': record.remarkDesc && record.remarkDesc.italics ? 'italic' : 'unset',
// 字体样式-斜体
'font-weight': record.remarkDesc && record.remarkDesc.bold ? 'bolder' : 'unset',
},
on: {
// 鼠标单击行
click: event => {
// do something
},
},
}
},
最终实现的效果最终实现的效果最终实现表格行样式的自定义补充知识:ant-design-vue 中table行 绑定点击事件补充知识:补充知识:ant-design-vue 中table行 绑定点击事件目前在学习使用antd中,需求双击表格行显示pdf,在table中给customRow设置行属性
bordered
:rowSelection="rowSelection"
:columns="columns"
:dataSource="data"
rowKey="id"
:customRow="Rowclick"
:pagination="pagination"
:scroll="{ y: 520 }"
size="small"
>
{{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }}
{{ status == 1 ? "已打印" : "未打印" }}
bordered
:rowSelection="rowSelection"
:columns="columns"
:dataSource="data"
rowKey="id"
:customRow="Rowclick"
:pagination="pagination"
:scroll="{ y: 520 }"
size="small"
>
{{ sex == 1 ? "男" : sex == 0 ? "女" : "/" }}
{{ status == 1 ? "已打印" : "未打印" }}
methods中methods中
Rowclick(record, index) {
return {
on: {
click: () => {},
dblclick: () => {
console.log(record, index, 2222);
this.showPdf = true;
let url = "demo.pdf";
this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
// window.open("/static/pdf/web/viewer.html?file=" + url);
}
}
};
},
Rowclick(record, index) {
return {
on: {
click: () => {},
dblclick: () => {
console.log(record, index, 2222);
this.showPdf = true;
let url = "demo.pdf";
this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
// window.open("/static/pdf/web/viewer.html?file=" + url);
}
}
};
},以上这篇Ant-design-vue Table组件customRow属性的使用说明就是小编分享给大家的全部内容了,希望能给大家一个参考。