基本架子搭建
- 搜索表单
inline不给值默认就是true
<!-- 表单区域,这上面加上inline,就可以使元素都在一行显示了 -->
<el-form inline>
<el-form-item label="文章分类:">
<el-select>
<!-- label是展示给用户看的,value是提交给后台的,通常value给的是id值 -->
<el-option label="新闻" value="111"></el-option>
<el-option label="体育" value="222"></el-option>
</el-select>
</el-form-item>
<el-form-item label="发布状态:">
<el-select>
<!-- 这里后台标记发布状态,就是通过中文标记的, 已发布 / 草稿 -->
<el-option label="已发布" value="已发布"></el-option>
<el-option label="草稿" value="草稿"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
- 表格准备,模拟假数据渲染
import { Delete, Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'
// 假数据
const articleList = ref([
{
id: 5961,
title: '新的文章啊',
pub_date: '2022-07-10 14:53:52.604',
state: '已发布',
cate_name: '体育'
},
{
id: 5962,
title: '新的文章啊',
pub_date: '2022-07-10 14:54:30.904',
state: null,
cate_name: '体育'
}
])