插槽--弹框(ref)

<!-- 表格 -->
        <a-table
          :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
          :columns="columns"
          :dataSource="data"
        >
          <template slot="view" slot-scope="text">
            <a-button class="view-btn" @click="viewDetail">查看</a-button>
            <a-button class="del-btn">删除</a-button>
          </template>
        </a-table>

在动态表格里设置 scopedSlots: { customRender: “view” },

// 表格
const columns = [
  {
    title: "任务反馈",
    dataIndex: "TaskFeedback"
  },
  {
    title: "操作",
    dataIndex: "handle",
    scopedSlots: { customRender: "view" },
    align: "center"     //设置居中
  }
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    TaskFeedback: `因局里安排......${i}`,   //i为序号
    handle: ``
  });
}

在父组件引入

一    import AddWorkReport from "./addWorkReport";
二    components: {   //在组件
            AddWorkReport,
            },
三      //在template中添加ref
四   addReport() {    //在方法里
             this.$refs.addWorkReport.open()   open是子组件里的方法
       },

你可能感兴趣的:(vue_antd,表格插槽,弹框)