网站降权,网站开发项目计划书,wordpress后台地址能改,临沂专业做网站上文是对el-table的基本封装#xff0c;只能满足最简单的应用#xff0c;本文主要是在上文的基础上增加slot插槽#xff0c;并且对col插槽进行拓展#xff0c;增加通用性
// BaseTable.vue
templateel-tabletemplate v-forname in tableSlots只能满足最简单的应用本文主要是在上文的基础上增加slot插槽并且对col插槽进行拓展增加通用性
// BaseTable.vue
templateel-tabletemplate v-forname in tableSlots :keyname #[name]slot :namename/slot/templateel-table-column v-for(col,index) in $attrs.config :keyindex v-bindcoltemplate v-ifcol.slot #[getColSlot(col)]scope slot :namecol.slot v-bindscope/slot/template/el-table-column/el-table
/template
script langts setup
const slotsuseSlots();
const tableSlotscomputed((){// 原生el-table插槽只有default,append,empty// 原生el-table-column插槽只有table插槽只有default,header// 这里将header单独处理认为是col的插槽从table插槽中排除return Object.keys(slots).filter(namename!header)
})
const getColSlot(col){return col.slotheader?header:default
}
/script//index.vue
templateBaseTable :configconfig :datatableData :style{width:800px}template #statusscopeel-text :typescope.row.status.type {{ scope.row.status.content }}/el-text/templatetemplate #btnscopeel-button typeprimary{{ scope.row.btn }}/el-button/template!-- 如有多个类似slot也可以用如下方式渲染 --!-- template v-for(col,index) in config.filter(itemitem.slot item.slot!header) :keyindex #[col.slot]scopeel-button typeprimary{{ scope.row.btn }}/el-button/template --template #headerscopeel-button typeprimary{{ scope.column.label }}/el-button/template/BaseTable
/templatescript langts setup
import BaseTable from ./BaseTable.vue
const config[{type:selection},{prop: date,label:日期,width:180},{prop: name,label:姓名,},{prop: status,label:状态,slot:status,width:180},{prop: btn,label:操作,slot:btn,width:180},{prop: header,label:按钮header,slot:header,width:180},
];
const tableData [{date: 2016-05-03,name: 张三,status:{content:工作,type:success},btn: confirm,},{date: 2016-05-02,name: 李四,status:{content:出差,type:primary},btn: confirm,},{date: 2016-05-04,name: 王五,status:{content:休假,type:danger},btn: confirm,},
]
/script
