封装组件
<template>
<div class="basic-table-wrap">
<el-table ref="tableRef" :data="tableList" @selection-change="selectionChange"
v-bind="$attrs">
<el-table-column v-if="rowSelection" type="selection" width="45" />
<template v-for="item in tableColumns" :key="item.prop">
<el-table-column
width="auto"
v-bind="item"
:align="item.align ?? 'left'"
>
<template #default="{ row, column, $index }">
<slot :name="item.prop" v-bind="{ row, column, $index }">
<span v-if="item.type === 'index'">{{ getIndex($index) }}</span>
<span v-else-if="isFunction(item.render)">
{{ item.render({ row, column, $index }) }}
</span>
<span v-else>
{{ row?.[item.prop] }}
</span>
</slot>
</template>
</el-table-column>
</template>
<template #empty>
<el-empty description="暂无数据" />
</template>
</el-table>
</div>
</template>
<script setup>
import { ref, computed, defineProps,defineEmits, defineExpose, onMounted } from "vue";
const props = defineProps({
tableList: {
type: Array,
default: () => [],
},
tableColumns: {
type: Array,
default: () => [],
},
rowSelection: {
type: Boolean,
default: false,
},
});
const tableRef = ref();
const emit = defineEmits(["changClick"]);
获取选中的值
const selectionChange(val) {
emit('changClick',val)
}
const isFunction=(value)=> {
return typeof value === 'function';
}
const getIndex = computed(() => {
return (index) => {
const offset = (1 - 1) * 10;
return index + 1 + offset;
};
});
</script>
export { default as BasicTable } from './src/index.vue';
组件使用
<template>
<div>
<BasicTable :tableColumns="tableColumns" :tableList="contractArr" @changClick="changeState">
<template #assetName="{ row }">
<div class="text-link" :title="row.ManagerName">
{{ row.ManagerName }}
</div>
</template>
<template #createTime="{ row }">
<span>{{ row.createTime.substr(0, 10) }}</span>
</template>
<template #operation="{ row }">
<div class="text_blue">
<span>详情</span>
</div>
</template>
</BasicTable>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import { BasicTable } from "@/components/BasicTable/index";
const tableColumns = ref([
{
label: "序号",
width: "80",
type: "index",
},
{
label: "负责人",
prop: "ManagerName",
width: "200",
render: ({ row }) => `${row.ManagerName} years old` // 自定义渲染
},
{
label: "创建时间",
prop: "createTime",
width: "150",
},
{
label: "操作",
prop: "operation",
width: "100",
fixed: "right",
},
]);
const contractArr=ref([])
const changeState=(val)=>{
}
</script>
