table添加操作按钮和获取当前行数据

    <a-table class="user_table"
      :columns="columns"
      :data-source="roleList"
      :rowKey="roleList.key"
    >
      <template slot="action" slot-scope="text,record">
        <a slot="action"  href="javascript:;" @click="onUser(record)">用户</a>
        <a slot="action"  href="javascript:;" @click="onRole(record)">权限</a>
        <a slot="action"  href="javascript:;" @click="onEdit(record)">编辑</a>
        <a slot="action"  href="javascript:;" @click="onDel(record)">删除</a>
      </template>
    </a-table>

• js 之数据

• const roleList = [
      {
        key: 1,
        code: '001_001',
        name: '消息',
        time: 2020,
        scopedSlots: { customRender: 'action' },
      },
    ];
    export default {
      components: {
      },
      data () {
        return {
          // 角色列表
          columns: [
            {
              title: '角色编码',
              dataIndex: 'code',
              width: 206,
            },
            {
              title: '角色名称',
              dataIndex: 'name',
              width: 199,
            },
            {
              title: '创建时间',
              dataIndex: 'time',
              width: 275,
            },
            {
              title: '操作',
              dataIndex: 'operate',
              width: 364,
              scopedSlots: { customRender: 'action' },
            },
          ],
          roleList: roleList,
        }
       }
  

   

• js 之 方法

• methods:{
        onEdit (res) {
          console.log('点击编辑', res);
        },
    }