html代码:
<a-table
:columns="columns"
:data-source="data"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
style="margin-top: 20px"
:loading="loading"
:fixed="true"
:scroll="{ x: 'calc(700px + 50%)', y: 450 }"
:pagination="pagination"
@change="handleTableChange"
:ellipsis="true"
>
<template slot="name" slot-scope="text, record">
<el-button @click="executeCustomeCell(record)" type="text">
{{ text }}
</el-button>
</template>
<template slot="operation" slot-scope="text, record">
<el-button type="text" @click="followRecord(text, record)"
>跟进</el-button
>
<el-button type="text" @click="showDetail(text, record)"
>查看</el-button
>
<el-button type="text" @click="updateCustomer(text, record)"
>编辑</el-button
>
<template>
<a-popconfirm
title="是否确定删除"
ok-text="确定"
cancel-text="取消"
@confirm="deleteCostomer(text, record)"
>
<el-button type="text"> 删除</el-button>
</a-popconfirm>
</template>
</template>
</a-table>
js代码:
data(){
return{
columns: [
{
title: "客户名称",
dataIndex: "name",
key: 0,
width: 200,
scopedSlots: { customRender: "name" }, //设置单元格操作
},
{
title: "客户星级",
dataIndex: "level",
key: 1,
width: "150px",
//设置数据格式化
customRender: (level) => {
return this.selectDictLabel(this.levelList, level);
},
},
{
title: "客户类型",
dataIndex: "type",
key: 2,
width: "150px",
customRender: (type) => {
return this.selectDictLabel(this.customer_type, type);
},
},
{
title: "操作",
dataIndex: "operation",
width: "200px",
fixed: "right",
scopedSlots: { customRender: "operation" },
},
data: [],//表格数据
selectedRowKeys: [], // 选中的行
}
methods:{
onSelectChange(selectedRowKeys, row)){
console.log(selectedRowKeys, row);
//selectedRowKeys当前选择的行的序号,设置选中行的数据回显,
//row当前选中行的所有数据
}
}