try: vue 3.x自製功能UI sample(無元件)

測試中。grid:含欄位排序功能。單筆資料時切換tab

by cactus77kiki

HTML

<!--將sampleform_css之"新增/修改/刪除/複製"整併為"單筆"-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Vue Grid+Page Component(Page-Server Side)</title>
    <script src="https://unpkg.com/[email protected]"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<style>
    body {
        /*font-family: 微軟正黑體, Verdana, Arial;*/
        font-family: "Helvetica", "Arial", "LiHei Pro", "黑體-繁", "微軟正黑體", sans-serif;
    }

    /*----custom style----*/
    /*legend title*/
    span.stitle {
        color: white;
        background-color: #4488cd;
        font-size: 1.1em;
        padding: 1.5px;
    }

    /*fieldset*/
    .fidset {
        border: 1px solid #4488cd;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 3px;
        margin: 10px;
    }

    /*data grid*/
    table.datagrid {
        border-collapse: collapse;
        align-self: center;
        width: 100%;
    }

    table.datagrid,
    .datagrid th,
    .datagrid td {
        text-align: center;
        padding: 1px;
        border: 1px solid #ddd;
    }

    table.datagrid th {
        background-color: #738ccd;
        color: white;
    }

    table.datagrid tbody:nth-child(even) {
        background-color: #f2f2f2;
    }

    /*table data sorts*/
    table.datagrid th.click {
        cursor: pointer;
    }

    table.datagrid th.click {
        cursor: pointer;
    }

    .icon {
        display: inline-block;
    }

    .icon.inverse {
        transform: rotate(180deg)
    }

    /*input*/
    .input-xs {
        height: 25px;
        line-height: 1.5;
        font-size: 13px;
        padding: 1px 5px;
        border-radius: 3px;
        font-family: "Helvetica", "Arial", "LiHei Pro", "黑體-繁", "微軟正黑體", sans-serif;
    }

    /*bkgcolor...