实现效果:
注意点:vue3取消slot-scope,改用v-slot,简写#。刚学vue3不久,语法不太熟悉,花了点时间。
核心代码:
详细代码:
//子组件
<template>
<div>
<el-table ref="el-from" :data="tableData" stripe style="width:100%" v-loading="loading">
<!-- 多选框 -->
<el-table-column v-if="configFlag.selection" type="selection" width="55" :align="align"></el-table-column>
<!-- 序号列 -->
<el-table-column v-if="configFlag.index" align="center" width="100" type="index" :index="1" :label="configFlag.indexName || '序号'" />
<!-- 文本 -->
<el-table-column v-for="item in tableTitleData" :key="item.id" :label="item.label" :prop="item.value" :sortable="item.sortable || false" :align="item.align || 'left'">
<template #default="scope">
<slot v-if="item.slotname" :name="item.slotname" :soltval="scope.row" />
<span v-else>
{{ scope.row.value }}
</span>
</template>
</el-table-column>
</el-table>
<div class="block pageBox" v-if="pageObj.total">
<el-pagination @current-change="handleCurrentChange" :currentPage="pageObj.page" background layout="prev, pager, next, jumper" :total="pageObj.total" :page-size="pageObj.size">
</el-pagination>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
tableData: {
type: Array,
default: () => {
return [{}];
}
},
loading: {
type: Boolean,
default: true
},
configFlag: {
type: Object,
default: () => {
return {
selection: false,
index: false
};
}
},
tableTitleData: {
type: Array,
default: () => {
return [];
}
},
pageObj: {
type: Object,
default: () =>{
return {
total:0,
size:20,
page:1
}
}
}
},
emits:['onchangepage'],
setup(props,ctx) {
const handleCurrentChange = (val) =>{
ctx.emit('onchangepage',val);
}
return {
handleCurrentChange
};
}
});
</script>
<style lang="scss" scoped>
.pageBox{
margin-top: 20px;
text-align: center;
}
</style>
//父组件
<template>
<header class="head">
<el-button type="primary">+ 新建</el-button>
<div class="head-right">
<div class="head-select">
<el-select placeholder="请选择测试题目类型" v-model="search.type" clearable>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<div class="head-input">
<el-input @keyup.enter="searchTable" @clear="searchTable" clearable v-model="search.value" placeholder="请输入关键字搜索">
<template #append>
<el-button icon="el-icon-search" @click="searchTable"></el-button>
</template>
</el-input>
</div>
</div>
</header>
<section>
<ele-table :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage" >
<template #typeName="scope" >
自定义slot:
<span>{{scope.soltval.key}}</span>
</template>
</ele-table>
</section>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs,onMounted } from "vue";
import eleTable from '@/components/ele-table/index.vue';
export default defineComponent({
components:{
eleTable
},
setup(){
const search = reactive({
value:'',
type:'',
page:1,
size:20,
total:0
})
const loading = ref(true);
const pageObj = ref({page:1,size:20,total:80})
const options = reactive({
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}]
})
const tableTitleData = ref([
{ id: 1, label: '测试', slotname: 'typeName' },
{ id: 2, label: '测试2',align:'center' }
])
const tableData = ref([
{ value: 3, key: '3-1' },
{ value: 4, key: '4-1'}
])
const changePage = (val) =>{
console.log(val)
};
const searchTable = () => {
console.log(111)
};
onMounted(()=>{
loading.value = false;
})
return{
search,
...toRefs(options),
loading,
pageObj,
tableTitleData,
tableData,
searchTable,
changePage
}
}
})
</script>
<style lang="scss" scoped>
@import 'index.scss';
</style>