noob-components/examples/view/base/table.vue

<template>
    <SearchRow :title="t('table.title')">
        <template #default>
            <NoobInput v-model="example.aaa" :width="180"></NoobInput>
            <NoobSelect v-model="example.bbb" dict="test"></NoobSelect>
            <NoobSelect v-model="example.ccc" stateProp="test" :width="120"></NoobSelect>
        </template>
    </SearchRow>
    <ListTable :data="data" :props="prop" :page="true" :border="true"></ListTable>
    <br />
    <br />
    <Infomation :num="100" title="总数" icon="DataAnalysis"></Infomation>
    <Infomation :num="100" title="总数" icon="DataAnalysis" :center="true"></Infomation>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { reactive, onMounted, ref } from "vue";
import { ListTable, SearchRow, NoobInput, NoobSelect, Infomation } from "noob-mengyxu";
import { useI18n } from "vue3-i18n";

const { state } = useStore();
const { t } = useI18n();
const example = reactive({
    page: 1,
    size: 10,
    aaa: "",
    bbb: 'b',
    ccc: 'c',
});

const data = {
    data: [
        { caseName: 111, taskName: 111, userId: 'test1', content: 'content1', createTime: 'createTime1' },
        { caseName: 222, taskName: 222, userId: 'test2', content: 'content2', createTime: 'createTime2' },
        { caseName: 333, taskName: 333, userId: 'test3', content: 'content3', createTime: 'createTime3' }
    ],
    total: 3
}

const prop = [
    {
        code: "caseName",
        i18n: 'table.props.0',
        width: 110,
    },
    {
        code: "taskName",
        i18n: 'table.props.1',
        width: 110,
    },
    {
        code: "userId",
        i18n: 'table.props.2',
        width: 100,
    },
    {
        code: "content",
        i18n: 'table.props.3',
        width: 500,
    },
    {
        code: "createTime",
        i18n: 'table.props.4',
        width: 170,
    },
];

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>