示图：
代码：
<template>
<table border="1" width="1000" cellpanding="0" cellspaing="0" style="margin:0 auto">
<tr>
<th><input type="checkbox" name="checkAll" id="checkAll" :checked="checkInfo==true" @click="checkAll"></th>
<th>商品编号</th>
<th>名称</th>
<th>价格</th>
<th>上货日期</th>
<th>是否下架</th>
<th>操作</th>
</tr>
<tr v-for="(p, i) in phones" :key="p.id" v-cloak>
<td>
<input type="checkbox" name="checkInfo" :checked="checkInfo==true">
</td>
<td>{{ p.id }}</td>
<td>{{ p.name }}</td>
<td>{{ p.price }}</td>
<td>{{ p.delivery_date }}</td>
<td><input type="checkbox" name="" id="" disabled :checked="p.remove==true"></td>
<td>
<a href="###" @click="removes(i)">删除</a>
<a href="###">修改</a>
<a href="###" @click="details(p,i)">详细</a>
</td>
</tr>
</table>
<fieldset v-cloak>
<legend>添加商品</legend>
<form method="post">
<p>
<label>商品编号：</label>
<input type="text" disabled name="name" class="inp" v-model="id">
</p>
<p>
<label>商品名称：</label>
<input type="text" name="age" class="inp" v-model="name">
</p>
<p>
<label>商品价格：</label>
<input type="text" name="price" class="inp" v-model="price">
</p>
<p style="margin-left: -151px;margin-bottom: 10px;">
<label>是否下架：</label>
<input type="checkbox" v-model="remove" :checked="remove==true" class="inp" >
</p>
<p style="margin-bottom: 20px;">
<label>上货日期：</label>
<select id="date" v-model="year" style="width:53px;margin-left: 10px;outline: none;">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
</select>
<select id="date" v-model="mounth" style="width:53px;margin-left: 10px;outline: none;" >
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">5</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select id="date" v-model="day" style="width:53px;margin-left: 10px;outline: none;">
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</p>
<button class="btn" @click.prevent="add()">添加</button>
<button class="btn" @click.prevent="edit">修改</button>
<button class="btn" @click.prevent="deleteAll()">批量删除</button>
</form>
</fieldset>
</template>
<script lang="ts">
import { reactive,ref} from 'vue';
export default ({
setup() {
let check=ref(false);
let checkInfo=ref(false);
let phones = reactive([
{ id: 1, name: "小米Pro", price: "1650", delivery_date: "2012-10-27",remove:false},
{ id: 2, name: "华为荣耀", price: "2650", delivery_date: "2011-09-22",remove:true},
{ id: 3, name: "oppo r11", price: "3650", delivery_date: "2014-11-27",remove:false},
{ id: 4, name: "vivo", price: "2650", delivery_date: "2015-11-07",remove:true},
])
function removes(i:any){
if(confirm("您确定要删除当前商品嘛")){
phones.splice(i,1)
}
}
let id=ref();
let name=ref("");
let price=ref("");
let delivery_date=ref("");
let remove=ref();
let is=0;
let year=ref("");
let mounth=ref("");
let day=ref("");
function details(p:any,i:any){
is=i
console.log(p)
id.value=p.id;
name.value=p.name;
price.value=p.price;
let time=p.delivery_date.split("-")
year.value=time[0]
mounth.value=time[1]
day.value=time[2]
remove.value=p.remove;
}
function add(){
id.value=phones.length+1
console.log(id.value);
delivery_date.value=year.value+"-"+mounth.value+"-"+day.value
phones.push({
id:id.value,
name:name.value,
price:price.value,
delivery_date:delivery_date.value,
remove:remove.value
})
alert("添加成功！")
id.value=null;
name.value="";
price.value="";
delivery_date.value="";
remove.value=false;
year.value="";
mounth.value="";
day.value="";
}
function edit(){
console.log(is)
phones[is].name=name.value;
phones[is].price=price.value;
phones[is].delivery_date=year.value+"-"+mounth.value+"-"+day.value;
phones[is].remove=remove.value;
alert("修改成功！")
id.value=null;
name.value="";
price.value="";
delivery_date.value="";
remove.value=false;
year.value="";
mounth.value="";
day.value="";
}
let ids=[]
function checkAll(){
checkInfo.value=!checkInfo.value
console.log(checkInfo.value)
ids=[1,2,3,4]
}
function deleteAll(){
if(confirm("你确定要删除当前选中的4条数据吗？"))
for(var i=0;i<ids.length;i++){
phones.splice(i,4)
checkInfo.value=false
}
}
return {phones,removes,details,add,check,edit,id,name,price,
delivery_date,remove,year,mounth,day,checkAll,checkInfo,deleteAll}
}
})
</script>
<style>
a {
margin-left: 20px;
}
.inp{
margin: 10px;
}
.btn{
padding: 0px 10px;
margin: 0 20px;
}
</style>
本文来自博客园，作者：最帅爸爸，转载请注明原文链接：https://www.cnblogs.com/zsbb
浙公网安备 33010602011771号