uj5u.com熱心網友回復：
另外還有就是一個人上班不可能每個崗位都有這個人 要特別注意的uj5u.com熱心網友回復：
<el-table :data="https://bbs.csdn.net/topics/tableData" max-height="650px" width="100%" fit border resizable @selection-change="selectChange" ref="multipleTable"><el-table-column type="index" label="序列" width="45px" fixed></el-table-column>
<el-table-column label="姓名(編號)" width="130px" fixed>
<template slot-scope="scope">
{{scope.row.name}}({{scope.row.nameID}})
</template>
</el-table-column>
<el-table-column v-for='item in templates' :label="item.shifts" :key="item.index" align="center">
<el-table-column v-if="item.children.length!=0" v-for="(item1,index1) in item.children" :model="templates.children" :label="item1.shifts+'('+(item1.coefficient?item1.coefficient:0)+')'" id="nq" :key="item1.index1" align="center">
<template slot-scope="scope">
<el-checkbox @click="selection1(scope)">000</el-checkbox>
</template>
<el-table-column v-if="item1.children.length!=0" v-for="(item2,index2) in item1.children" :label="item2.shifts+'('+(item2.coefficient?item2.coefficient:0)+')'" :key="item2.index2" align="center">
<template slot-scope="scope">
<el-checkbox @change="selection(scope)">111</el-checkbox>
</template>
<el-table-column v-if="item2.children.length!=0" v-for="(item3,index3) in item2.children" :label="item3.shifts+'('+(item3.coefficient?item3.coefficient:0)+')'" label-class-name="aaa" :key="index3" align="center">
<template slot-scope="scope,$index">
<el-checkbox v-if="trueOrFalseSelection==1" @change="selection(scope,$index)" v-model="checked">222{{trueOrFalseSelection}}</el-checkbox>
<el-checkbox v-if="trueOrFalseSelection!=1" @change="selection(scope,$index)">223332{{trueOrFalseSelection}}</el-checkbox>
</template>
<el-table-column v-if="item3.children.length!=0" v-for="(item4,index4) in item3.children" :label="item4.shifts+'('+(item4.coefficient?item4.coefficient:0)+')'" :key="item4.index4" align="center">
<template slot-scope="scope">
<el-checkbox @change="selection(scope)">333</el-checkbox>
</template>
<el-table-column v-if="item4.children.length!=0" v-for="(item5,index5) in item4.children" :label="item5.shifts+'('+(item5.coefficient?item5.coefficient:0)+')'" :key="item5.index5" align="center">
<template slot-scope="scope">
<el-checkbox @change="selection(scope)">444</el-checkbox>
</template>
<el-table-column v-if="item5.children.length!=0" v-for="(item6,index6) in item5.children" :label="item6.shifts+'('+(item6.coefficient?item6.coefficient:0)+')'" :key="item6.index6" align="center">
<template slot-scope="scope">
<el-checkbox @change="selection(scope)">555</el-checkbox>
</template>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
uj5u.com熱心網友回復：
如果只是在前端的進行處理的話我建議是把已經勾選的存盤在sessionStorage中不過我還是建議在勾選的時候同步到后端 下次重繪的時候獲取后端的資料
uj5u.com熱心網友回復：
既然有資料庫，勾選了就保存到資料庫里，重繪時取出狀態來系結就好了uj5u.com熱心網友回復：
那個具體怎么實作了?uj5u.com熱心網友回復：
具體怎么實作了?uj5u.com熱心網友回復：
每次勾選之后儲存資料到本地儲存或cookie或資料庫，重繪之后先讀取資料然后將資料套上去uj5u.com熱心網友回復：
類似
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<div v-for="item in arr">
<p>
<input type="radio" :value="https://bbs.csdn.net/topics/item.id" :checked="checkArr.indexOf(item.id)>0?'checked':''" @change="changeHandler">
<label >{{item.value}}--{{checkArr.indexOf(item.id)>0}}</label>
</p>
</div>
<input type="button" value="https://bbs.csdn.net/topics/強刷" @click="reflash">
</div>
<script>
var app = new Vue({
el: "#app",
data(){
return{
arr: [
{
"id": '1',
"value": "one"
},
{
"id": '2',
"value": "two"
},
{
"id": '3',
"value": "three"
}
],
checkArr:(window.localStorage.getItem('checkArr') || '').split(',')
}
},
methods:{
changeHandler(e){
//不用()=> 拿不到this
console.log(this.arr)
let value = e.target.value,
index = this.checkArr.indexOf(value)
if( index>=0){
this.checkArr.splice(index,1)
}else{
this.checkArr.push(value)
}
console.log(this.checkArr)
window.localStorage.setItem('checkArr',this.checkArr)
},
reflash:()=>{
window.localStorage.setItem('checkArr',[])
window.location.reload()
}
}
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
就是這個問題怎么去實作他了?uj5u.com熱心網友回復：
類似購物車啊每次資料或勾選有變動，發送一個異步請求到后臺，請求內容帶上時間戳，如果時間戳比資料庫記錄的時間戳晚，就更新到資料庫，并記錄最新時間戳（帶時間戳是怕請求時，網路延遲，造成后發送的請求比先發送的請求更早處理）
重繪的時候直接讀資料庫，把狀態再體現出來即可
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/119597.html
標籤：JavaScript
上一篇：前端埋點, 大佬們有沒有推薦的
下一篇：網路前端必看的100本書