vue + ant design 之table添加操作按钮和获取当前行数据

我就是我 2022-12-20 02:52 145阅读 0赞

![20201110095553584.png][]

### 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);
              },
          }

[20201110095553584.png]: /images/20221120/51a32236b9fb4596b1f63ea535f6ccf1.png