cool-admin

官方 https://www.cool-js.com/front/vue3-vite.html

<cl-crud @load="onLoad">
<el-row type="flex">
            <cl-refresh-btn >刷新数据</cl-refresh-btn>//<cl-refresh-btn />
            <cl-add-btn /> //新增
            <cl-multi-delete-btn /> //批量删除
            <cl-flex1 />
            <cl-search-key /> //关键字刷选
        </el-row>

<el-row>
            <cl-table v-bind="table" />
        </el-row>
<el-row type="flex">
            <cl-flex1 />
            <cl-pagination /> //分页
        </el-row>
</cl-crud>

<cl-query
    multiple
    :list="[
        {
            label: '天猫',
            value: 0
        },
        {
            label: '淘宝',
            value: 1
        },
        {
            label: '京东',
            value: 2
        }
    ]"
></cl-query> //条件刷选 multiple表示复选以,链接
<cl-search-key
    field="name"
    :field-list="[
        {
            label: '昵称',
            value: 'name'
        },
        {
            label: '手机号',
            value: 'phone'
        }
    ]"
></cl-search-key>//多字段搜索
<cl-dialog title="对话" :visible.sync="visible">
    <p>少年，我看你骨骼精奇，是万中无一的武学奇才，维护世界和平就靠你了</p>
</cl-dialog>
<cl-filter label="状态"> //过滤
    <el-select size="mini" v-model="form.status">
        <el-option value="" label="全部"></el-option>
        <el-option :value="0" label="禁用"></el-option>
        <el-option :value="1" label="启用"></el-option>
    </el-select>
</cl-filter>
<cl-avatar src="https://" /> //头像
<el-button v-copy="'https://www.xxx.com/'" size="small">
                https://www.xxx.com
            </el-button>//复制