try:vue 3.x 自試grid內編輯

(複製)有問題.沒考慮(下拉選單)等因素.總之是個嘗試的東西,覺得不好使+不好寫為元件

by cactus77kiki

HTML

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

<div id="appdiv">
  <!--{{msg}}-->
  <!--{{dataVal}}-->
  <!--{{mode}}-->
  <table class="datagrid">
    <thead>
      <tr>
        <th >Name</th>
        <th >County</th>
        <th>Gender</th>
        <th >Score(A)</th>
        <th >Score(C)</th>
        <th >Score(E)</th>
        <th >DT</th>
        <th>功能</th>
    </tr>
  </thead>
 <tbody v-for="(item,index) in dataVal" :key="item.Id">
   <tr >
      <td >
        <div v-if="item.QueryMode || item.DeleteMode">{{item.Name}}</div>
        <div v-else>
          <input type="text" v-model="item.Name" style="width:100px;">
        </div>
      </td>      
      <td >        
        <div v-if="item.QueryMode || item.DeleteMode">{{item.County}}</div>
        <div v-else>
          <input type="text" v-model="item.County"  style="width:100px;">
        </div>
      </td>
      <td>        
        <div v-if="item.QueryMode || item.DeleteMode">{{item.Gender}}</div>
        <div v-else>
          <input type="text" v-model="item.Gender"  style="width:100px;">
        </div>
      </td>
      <td>
        <div v-if="item.QueryMode || item.DeleteMode">{{item.ScoreA}}</div>
        <div v-else>
          <input type="text" v-model="item.ScoreA"  style="width:100px;">
        </div>
      </td>
      <td >        
        <div v-if="item.QueryMode || item.DeleteMode">{{item.ScoreC}}</div>
        <div v-else>
          <input type="text" v-model="item.ScoreC"  style="width:100px;">
        </div>
      </td>
      <td >        
        <div v-if="item.QueryMode || item.DeleteMode">{{item.ScoreE}}</div>
        <div v-else>
          <input type="text" v-model="item.ScoreE"  style="width:100px;">
        </div>
      </td>
      <td >      
        <div...

CSS

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;
    }

JavaScript

let testdata = {
            "DataList": [
                {
                    "Id": 1,
                    "Name": "Amai",
                    "Gender": 1,
                    "County": "台北市",
                    "ScoreA": 60,
                    "ScoreC": 98,
                    "ScoreE": 77,
                    "DT": '2021-05-01',
                    "QueryMode": true,
                    "AddMode": false,
                    "EditMode": false,
                    "CopyMode": false,
                    "DeleteMode": false,
                },
                {
                    "Id": 2,
                    "Name": "Amily",
                    "Gender": 1,
                    "County": "新北市",
                    "ScoreA": 62,
                    "ScoreC": 80,
                    "ScoreE": 87,
                    "DT": '2021-09-04',
                    "QueryMode": true,
                    "AddMode": false,
                    "EditMode": false,
                    "CopyMode": false,
                    "DeleteMode": false,
                },
                {
                    "Id": 3,
                    "Name": "Anthony",
                    "Gender": 1,
                    "County": "台北市",
                    "ScoreA": 63,
                    "ScoreC": 66,
                    "ScoreE": 89,
                    "DT": '2021-03-24',
                    "QueryMode": true,
                    "AddMode": false,
                    "EditMode": false,
                    "CopyMode": false,
                    "DeleteMode": false,
                },
                {
                    "Id": 4,
                    "Name": "Bob",
                    "Gender": 1,
                    "County": "台中市",
                    "ScoreA": 70,
                    "ScoreC": 63,
                    "ScoreE": 80,
                    "DT": '2021-11-24',
                    "QueryMode": true,
                    "AddMode": false,
                    "EditMode": false,
          ...