开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情

插槽渲染组件

通过插槽 slot 我们可以写一些按钮，输入框等,很方便的就出来了，我们给slot定义一个名字, 通过name去绑定对应的数据

  <a-table index :checkbox="false" :column="column">
    <template v-slot:operation>
        <el-button type="primary">编辑</el-button>
        <el-button>删除</el-button>
    </template>
  </a-table>
  //script
  data() {
    return {
      column: [
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
        {
            type: 'slot',
            label: "操作",
            prop: 'operation',
            slot_name: "operation"
        }
      ],
    };
  },

   <el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <slot :name="item.slot_name"></slot>
        </template>
    </el-table-column>

作用域插槽传输数据

当我们点击编辑的时候需要携带参数,这时候我们就可以用到作用域插槽来传输 我们通过:data="row"的方式将数据传输过去

    <el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <slot :name="item.slot_name" :data="row"></slot>
        </template>
    </el-table-column>

通过slot的方式去接受,这里我们用 {{slot.data.id}} 看一下接收的内容，我们第一个数据中加了一个id属性

<template>
  <a-table index :checkbox="false" :column="column">
    <template v-slot:operation="slot">
        {{slot.data.id}}
        <el-button type="primary">编辑</el-button>
        <el-button>删除</el-button>
    </template>
  </a-table>
</template>

    data() {
    return {
        tableData: [
        {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            id: 20
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
        },
        ],
    };
},

这时候我们可以在点击删除按钮的时候，利用作用域插槽来获取所需要的数据

<template>
  <a-table index :checkbox="false" :column="column">
    <template v-slot:operation="slot">
        <el-button type="primary">编辑</el-button>
        <el-button @click="jumn(slot.data)">删除</el-button>
    </template>
  </a-table>
</template>

  methods: {
    jumn(data) {
        console.log(data);
    }
  }

附完整代码

<template>
  <a-table index :checkbox="false" :column="column">
    <template v-slot:operation="slot">
        <el-button type="primary">编辑</el-button>
        <el-button @click="jumn(slot.data)">删除</el-button>
    </template>
  </a-table>
</template>
<script>
export default {
  name: "Home",
  components: {
    "a-table": () => import("@/components/table/index"),
  },
  data() {
    return {
      column: [
        { 
            type: 'function',
            label: "URL地址", 
            prop: "date" ,
            callback: (data) => {
                return `<a href="https://www.taobao.com/">${data.name}</a>`
            }
        },
        { label: "姓名", prop: "name" },
        { label: "地址", prop: "address" },
        {
            type: 'slot',
            label: "操作",
            prop: 'operation',
            slot_name: "operation"
        }
      ],
    };
  },
  methods: {
    jumn(data) {
        console.log(data);
    }
  }
};
</script>

<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column v-if="index" type="index" width="40px"></el-table-column>
    <el-table-column v-if="checkbox" type="selection" width="40px"></el-table-column>
    
    <template v-for="item in column">
    <el-table-column v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <div v-html="item.callback && item.callback(row)"></div>
        </template>
    </el-table-column>
    <el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <slot :name="item.slot_name" :data="row"></slot>
        </template>
    </el-table-column>
    <el-table-column v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

    </template>
    </el-table>
</template>
<script>
export default {
    name: "Table",
    props: {
        column: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: true
        },
        index: Boolean,
    },
    data() {
    return {
        tableData: [
        {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            id: 20
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
        },
        ],
    };
},
};
</script>