• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Experience on pit

This afternoon can be figured out, I looked up a lot of information online seems to be a little old

Like this:

<template slot="action" slot-scope="text,record"> <a slot="action" href="javascript:;" @click="onUser(record)"> user </a> <a slot="action" href="javascript:; @click="onRole(record)"> permission </a> </template> <script> columns: [{dataIndex: "checklistName", key: "checklistName", id: "1", title: this.$t("table.ChecklistName"), width: 150, fixed: "left", scopedSlots: { customRender: "name" }, },] </script>Copy the code

The key elements of slot, slot-scope, and scopedSlots appear to be invalid. The scopedSlots method is no longer available. So much for the nonsense, let’s get started:

Correct tutorial

Step 1 Create the table

Note that #name is the name of the slot you want to create, and the tag is for whatever you want to display, you can put buttons, images, whatever you want to put in it.

 <a-table :columns="columns" :data-source="data">//:columns describe data objects<template #name="{ record }">/ / : the data of the data<a-button type="primary" ghost @click="hide(record)">The editor</a-button>
      </template>
</a-table>// Record is a fixed form, remember not to change, later get line information usedCopy the code

The second step is to quote the data

Note: In the columns binding data, write the slots attribute and use the customRender binding

const columns = [
  {
    title: "View".key: "View".dataIndex: "key".align: "center".slots: { customRender: "name" },// Bind the slot
  },]
Copy the code

The third step is to obtain the corresponding row data

Here I use vue3 to write, the record variable in the label above is the row information, here can be obtained

const hide = (e) = > {
      console.log(e);
    };
Copy the code

Final rendering

​

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Those who want to make friends with bloggers can go to 🌹

Bloggers are honest and answer questions for free ❤