基于vue3.0和element-plus的组件库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

73 lines
1.9 KiB

<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"></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>