antdesign vue——table
给表格特定行设置高亮背景色a-table标签设置属性:rowClassName=“setRowbg”定义methods方法setRowbg定义样式.bg-pink<a-table:columns="columns":rowClassName="setRowbg":data-source="loadData"bordered:scroll="{ x: 1300 }":pagi
·
加一列序号
{
title: '序号',
align: 'center',
width: 50,
customRender: (text, record, index) => index + 1,
},
- text:该列默认显示的数据 index 值
- record:一行的所有数据 { index:1, }
- index:Table表格数据的下标,也就是数组的下标
根据返回值渲染不同的内容
{
title: '序号',
dataIndex: 'status', // text就代表 status 的值
align: 'center',
width: 50,
customRender: (text, record, index) => text == 0 ? '正常' : '异常',
},
表格前有复选框,需要在a-table标签上添加属性rowKey=“id”(id为data-source数据里的不重复标识项)
在 Table 中,dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。
如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。若没有指定,控制台会出现缺少 key 的提示,表格组件也会出现各类奇怪的错误。
<a-table
size="middle"
ref="table"
rowKey="orderId"
:columns="columns"
:dataSource="loadData"
:pagination="false"
bordered
:row-selection="rowSelection"
>
computed: {
rowSelection() {
const { selectedRowKeys } = this;
return {
selectedRowKeys,
onChange: this.onSelectChange,
};
},
},
methods: {
// 点击选框的时候触发,参数为上边标签上的rowKey的值的合集数组
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
},
给表格特定行设置高亮背景色
- a-table标签设置属性 :rowClassName=“setRowbg”
- 定义methods方法setRowbg
- 定义样式 .bg-pink
<a-table
:columns="columns"
:rowClassName="setRowbg"
:data-source="loadData"
bordered
:scroll="{ x: 1300 }"
:pagination="false"
>
// 设置每行的颜色
setRowbg(record, index) {
if (index == 0) { // 条件
return 'bg-pink'
}
}
//设置样式类名
/deep/ .bg-pink {
background-color: rgb(255, 212, 147);
}
给表格每一行添加点击等事件并使其高亮
- table标签添加 :customRow=“rowClick”
- 定义方法 rowClick
<a-table
:columns="columns"
:rowClassName="setRowbg"
:data-source="loadData"
bordered
:scroll="{ x: 1300 }"
:pagination="false"
:customRow="rowClick"
>
// 点击每一行添加变量
rowClick(record) {
return {
on: {
click: () => {
// 点击该行时赋值
this.tableCurrRowId = this.tableCurrRowId == record.id ? '' : record.id
}
}
}
}
拖拽每行重新排序
<a-table
:dataSource="tableData"
:pagination="false"
rowKey='id'
:customRow="customRow"
bordered>
....
</a-table>
// 拖动排序
customRow(record, index) {
return {
style: {
cursor: 'pointer'
},
on: {
// 鼠标移入
mouseenter: (event) => {
// 兼容IE
var ev = event || window.event
ev.target.draggable = true
},
// 开始拖拽
dragstart: (event) => {
// 兼容IE
var ev = event || window.event
// 阻止冒泡
ev.stopPropagation()
// 得到源目标数据
this.sourceObj = record
},
// 拖动元素经过的元素
dragover: (event) => {
// 兼容 IE
var ev = event || window.event
// 阻止默认行为
ev.preventDefault()
},
// 鼠标松开
drop: (event) => {
// 兼容IE
var ev = event || window.event
// 阻止冒泡
ev.stopPropagation()
// 得到目标数据
this.targetObj = record
}
}
}
},
更多推荐
已为社区贡献27条内容
所有评论(0)