console
// moment.locale('zh-cn');
const table1 = {
template: `
<a-table :columns="columns" :data-source="data" :customRow="customRow">
<a slot="name" slot-scope="text,record,index">
{{ text }}
<span v-if="currentRow === index" style="position:absolute;">
我是胡雪纯
</span>
</a>
</a-table>
`,
data() {
const currentRow = -1;
const columns = [
{
title: 'Name',
dataIndex: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Disabled User',
age: 99,
address: 'Sidney No. 1 Lake Park',
},
];
return {
data,
columns,
currentRow,
};
},
methods: {
customRow(record, index) {
return {
// props: {
// xxx... //属性
// },
on: { // 事件
click: (event) => {}, // 点击行
dblclick: (event) => {},
contextmenu: (event) => {},
mouseenter: (event) => {
this.currentRow = index
}, // 鼠标移入行
mouseleave: (event) => {
this.currentRow = -1
}
},
};
}
},
};
new Vue({
el: '#app',
components: {
table1,
}
});
<div id="app">
<table1/>
</div>