- <template>
- <div>
- <el-table ref="table" :data="data" v-bind="_option" v-on="_option">
- <el-table-column v-for="(column, index) in columns" :key="index" v-bind="{ ...defaultColumnOption, ...column }">
- <template #header v-if="column.headerRender">
- <template-header-render :column="column" :render="column.headerRender" />
- </template>
- <template #default="scope" v-if="column.render">
- <template-render :scope="scope" :render="column.render" />
- </template>
- </el-table-column>
- </el-table>
- </div>
- </template>
-
- <script setup>
- import { ElLoading } from 'element-plus';
- const TemplateHeaderRender = props => {
- return props.render(props.column);
- };
- const TemplateRender = props => {
- return props.render(props.scope);
- };
- const { proxy } = getCurrentInstance();
- const attrs = useAttrs();
- const props = defineProps({
- columns: {
- type: Array,
- default: () => [],
- },
- options: {
- type: Object,
- default: () => {},
- },
- data: {
- type: Array,
- default: () => [],
- },
- loading: {
- type: Boolean,
- default: false,
- },
- });
- const { columns, data } = toRefs(props);
- const defaultOption = reactive({
- stripe: true,
- });
- const defaultColumnOption = reactive({
- showOverflowTooltip: true,
- });
- const loadingInstance = ref(null);
- const loadingDefaultOption = reactive({
- text: '加载中...',
- });
- const _option = computed(() => {
- return Object.assign({}, defaultOption, props.options, attrs);
- });
- const $table = computed(() => {
- return proxy.$refs.table;
- });
- watch(
- () => props.loading,
- val => {
- if (val) {
- loadingInstance.value = ElLoading.service(
- Object.assign({}, loadingDefaultOption, attrs, {
- target: proxy.$el,
- })
- );
- } else {
- loadingInstance.value && loadingInstance.value.close();
- }
- }
- );
- const getSelection = () => {
- return $table.selection;
- };
- defineExpose({
- $table,
- getSelection,
- });
- </script>
-
- <style lang="scss">
- .el-tooltip__popper {
- max-width: 400px;
- line-height: 180%;
- font-size: 16px;
- }
- </style>