Replies: 1 comment
-
The following is a real conversationmy prompt 1Generate a tree on the left, filter conditions on the top of the right, a table below, and a pagination page code at the bottom, which needs to be written with vue3 and element-plus. chatGPT generate code 1<template>
<div class="page-container">
<!-- left tree panel -->
<div class="panel-left">
<el-tree
:data="treeData"
:props="treeProps"
node-key="id"
default-expand-all
/>
</div>
<!-- right filter panel -->
<div class="panel-right">
<el-form :inline="true" :model="searchForm" class="demo-form-inline">
<el-form-item label="keywords">
<el-input v-model="searchForm.keyword" placeholder="Please enter key words" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitSearch">query</el-button>
<el-button @click="resetSearch">reset</el-button>
</el-form-item>
</el-form>
</div>
<!-- Table and pagination below -->
<div class="panel-bottom">
<el-table :data="tableData" ref="table" border fit highlight-current-row max-height="500">
<el-table-column prop="name" label="name" />
<el-table-column prop="age" label="age" />
<el-table-column prop="gender" label="gender" />
<el-table-column label="actions">
<template v-slot="scope">
<el-button type="text" @click="handleEdit(scope.row)">edit</el-button>
<el-button type="text" @click="handleDelete(scope.row)">delete</el-button>
</template>
</el-table-column>
</el-table>
<div class="pagination-container">
<el-pagination
v-model="currentPage"
:page-sizes="[20, 50, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</div>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
name: 'PageWithTreeAndTable',
setup() {
// Left tree panel data and properties
const treeData = [
{
id: 1,
label: 'node-1',
children: [
{ id: 2, label: 'node-1-1' },
{ id: 3, label: 'node-1-2' },
],
},
{
id: 4,
label: 'node-2',
},
];
const treeProps = {
label: 'label',
children: 'children',
};
// Filter panel data on the right
const searchForm = reactive({
keyword: '',
});
// Tabular and paginated data
const tableData = [
{ id: 1, name: 'James', age: 20, gender: 'male' },
{ id: 2, name: 'Oliver', age: 25, gender: 'female' },
{ id: 3, name: 'Sophia', age: 30, gender: 'female' },
// omit some data
];
const currentPage = 1;
const pageSize = 20;
// filter table data
const filteredTableData = computed(() => {
return tableData.filter(item => {
return !searchForm.keyword || item.name.includes(searchForm.keyword);
});
});
// reset search form
const resetSearch = () => {
searchForm.keyword = '';
};
// submit search form
const submitSearch = () => {
// Omit the code, update the table data and reset the pagination
currentPage.value = 1;
};
// Handle page number changes
const handleCurrentChange = newPage => {
currentPage.value = newPage;
};
// Handle page size changes
const handleSizeChange = newSize => {
pageSize = newSize;
currentPage.value = 1;
};
// Handle the edit button click event
const handleEdit = row => {
// Omit the code and open the edit pop-up window
};
// Handle the delete button click event
const handleDelete = row => {
// Omit the code and pop up a confirmation dialog
};
return {
treeData,
treeProps,
searchForm,
filteredTableData,
resetSearch,
submitSearch,
currentPage,
pageSize,
handleCurrentChange,
handleSizeChange,
handleEdit,
handleDelete,
};
},
};
</script>
<style scoped>
.page-container {
display: flex;
flex-direction: column;
height: 100%;
}
.panel-left {
flex: 0 0 15%;
overflow-y: auto;
padding: 20px;
}
.panel-right {
flex: 0 0 20%;
padding: 20px;
}
.panel-bottom {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
}
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: center;
}
</style>
my prompt 2The code written above is fine, but I don't want div, I should use element-plus containers. chatGPT generate code and tip 2<template>
<el-container>
<!-- left tree component -->
<el-aside style="flex: 0 0 200px">
<el-tree :data="data" />
</el-aside>
<el-container>
<!-- Query criteria in the upper right corner -->
<el-header>
<el-row :gutter="20">
<el-col :span="4">
<el-form-item label="Condition 1">
<el-input v-model="searchValue1" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="Condition 2">
<el-input v-model="searchValue2" />
</el-form-item>
</el-col>
<el-col :span="4">
<el-button type="primary" @click="handleSearch">query</el-button>
</el-col>
</el-row>
</el-header>
<!-- Table and pagination components -->
<el-main>
<el-table :data="tableData">
<el-table-column prop="name" label="name" />
<el-table-column prop="age" label="age" />
<el-table-column prop="gender" label="gender" />
</el-table>
<el-pagination
style="margin-top: 20px;"
:total="total"
:current-page.sync="currentPage"
:page-size="pageSize"
@current-change="handlePageChange"
/>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: 'App',
data() {
return {
data: [
{ label: 'option 1', children: [{ label: 'child option 1' }, { label: 'child option 2' }] },
{ label: 'option 2', children: [{ label: 'child option 3' }, { label: 'child option 4' }] },
],
searchValue1: '',
searchValue2: '',
currentPage: 1,
pageSize: 10,
total: 100,
tableData: [
{ name: 'Tom', age: 18, gender: 'male' },
{ name: 'Lucy', age: 22, gender: 'female' },
{ name: 'John', age: 25, gender: 'male' },
{ name: 'Lily', age: 27, gender: 'female' },
{ name: 'Mike', age: 30, gender: 'male' },
{ name: 'Rain', age: 35, gender: 'female' },
{ name: 'Jack', age: 40, gender: 'male' },
{ name: 'Moon', age: 45, gender: 'female' },
{ name: 'Jenny', age: 50, gender: 'female' },
{ name: 'Tim', age: 55, gender: 'male' },
],
}
},
methods: {
handleSearch() {
// Query data based on query conditions
},
handlePageChange(currentPage) {
// Get the corresponding data according to the page number
},
},
}
</script>
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
we often copy the example code and then modify it. But it takes a lot of time to adjust the template and the corresponding data like a table column, which is a waste of time.
We will soon be able to use github copliot x, we can copy the prompt from the official document and modify it slightly to get the code.
this amazing and cool, empower docs with wisdom.
3 votes ·
Beta Was this translation helpful? Give feedback.
All reactions