vue +vant 實(shí)現(xiàn)復(fù)選框全選和單選

1,需求

公司要求申請(qǐng)單審批的時(shí)候，需要手動(dòng)添加抄送人，

1.1 需要實(shí)現(xiàn) 按照部門分類筐乳，部門全選，部門內(nèi)員工全部選中乔妈；

? ? ? ? ? ? 一個(gè)部門內(nèi)所有員工都選中時(shí)蝙云，部門復(fù)選框也要選中；

? ? ? ? ? ? 全選狀態(tài)下路召，部門內(nèi)某一個(gè)員工未選中勃刨，則整個(gè)部門復(fù)選框不選中；

1.2 搜索時(shí)股淡，如果在部門或者單個(gè)員工選中身隐，則搜索出對(duì)應(yīng)的員工時(shí)，也要選中唯灵，

子組件：html

? ? <div>

? ? ? ? <van-popup v-model="isAddPageShow" position="right" :overlay="true" :lock-scroll="true"

? ? ? ? ? ? :close-on-click-overlay="false" class="fullPage">

? ? ? ? ? ? <div class="header_box">

? ? ? ? ? ? ? ? <van-nav-bar title="選擇抄送人" :fixed="true" left-arrow :z-index="300" @click-left="goBack"></van-nav-bar>

? ? ? ? ? ? </div>

? ? ? ? ? ? <section class="index_container">

? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? <van-search v-if="letterPageShow" v-model="searchNames" placeholder="輸入您要找的人名贾铝、手機(jī)號(hào)或部門" show-action

? ? ? ? ? ? ? ? ? ? shape="round" @search="searchBtn">

? ? ? ? ? ? ? ? ? ? <div slot="action" @click="searchBtn">搜索</div>

? ? ? ? ? ? ? ? </van-search>

? ? ? ? ? ? ? ? <div class="input_wrap" v-if="!letterPageShow">

? ? ? ? ? ? ? ? ? ? <p @click="toSearch">

? ? ? ? ? ? ? ? ? ? ? ? <van-icon name="search" size="20px" />

? ? ? ? ? ? ? ? ? ? ? ? <span>請(qǐng)輸入您要搜索的人名或手機(jī)號(hào)或部門</span>

? ? ? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <div class="staffList">

? ? ? ? ? ? ? ? ? ? <div v-if="!letterPageShow">

? ? ? ? ? ? ? ? ? ? ? ? <span class="company_name">有限公司</span>

? ? ? ? ? ? ? ? ? ? ? ? <div v-for="(item,index) in deptData" :key="index" class="deptList">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-checkbox :name="item" v-model="item.isChecked" style="background-color: #f2f6fc"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @click.stop="allSingleChange(item.isChecked,index)"></van-checkbox>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-collapse class="department_title" v-model="activeNames" accordion>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-collapse-item :name="index" :title="item.deptName">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div v-for="(itemList,index1) in item.userList" :key="index1">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-checkbox :name="itemList" v-model="itemList.isChecked"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @click.stop="SingleChecked(itemList, index)"></van-checkbox>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img :src="itemList.headImg ? BASE_IMG_URL+itemList.headImg: headImg">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>{{itemList.name}}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a :href="'tel:'+itemList.loginName">{{itemList.loginName}}</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </van-collapse-item>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </van-collapse>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div :class="{ 'mintstyle' :letterPageShow } " v-if="letterPageShow">

? ? ? ? ? ? ? ? ? ? ? ? <van-checkbox-group v-model="lettersListIdArr">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-cell-group>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-cell v-for="(item, index) in lettersList" :key="index"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @click="lettersListToggle(item, index)">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="cell">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <van-checkbox :name="item.id" ref="lettersListCheckboxes"

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? @click="lettersListToggle(item, index)" />

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <img :src="item.headImg ? BASE_IMG_URL+item.headImg : headImg">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="content">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>{{item.name}}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <a :href="'tel:'+item.loginName">{{item.loginName}}</a>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </p>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span>有限公司—{{item.deptName}}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </van-cell>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </van-cell-group>

? ? ? ? ? ? ? ? ? ? ? ? </van-checkbox-group>

? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? <div class="noFind" v-if="noFind">找不到該聯(lián)系人</div>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <Loading :successFlag="successFlag" :errorFlag="errorFlag" :loading="isShow"></Loading>

? ? ? ? ? ? </section>

? ? ? ? ? ? <div v-if="letterPageShow" class="totalBtn" @click="letterPageBtnFn" >

? ? ? ? ? ? ? ? 確定選擇({{lettersListIdArr.length}})</div>

? ? ? ? ? ? <div v-else class="totalBtn" @click="addStaff">確定添加({{resultIdArr.length}})</div>

? ? ? ? </van-popup>

? ? </div>

</template>

js:

? ? import headerBar from "@/components/header";

? ? import {

? ? ? ? BASE_URL_IMG

? ? } from "@/api/uploadImg";

? ? import {

? ? ? ? reqDepartMent,

? ? ? ? reqLetter

? ? } from "@/api/staff";

? ? import Loading from "@/components/Loading";

? ? export default {

? ? ? ? props: {

? ? ? ? ? ? isAddPageShow: Boolean

? ? ? ? },

? ? ? ? data() {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? isShow: false,

? ? ? ? ? ? ? ? successFlag: false,

? ? ? ? ? ? ? ? errorFlag: false,

? ? ? ? ? ? ? ? allList: [],

? ? ? ? ? ? ? ? deptData: [],

? ? ? ? ? ? ? ? deptDataChecked: [],

? ? ? ? ? ? ? ? letters: [],

? ? ? ? ? ? ? ? lettersList: [],

? ? ? ? ? ? ? ? activeNames: "1",

? ? ? ? ? ? ? ? BASE_IMG_URL: BASE_URL_IMG,

? ? ? ? ? ? ? ? headImg: require("./img/1.jpg"),

? ? ? ? ? ? ? ? letterPageShow: false,

? ? ? ? ? ? ? ? searchLetter: [],

? ? ? ? ? ? ? ? searchNames: '',

? ? ? ? ? ? ? ? checkedFlag: false,

? ? ? ? ? ? ? ? noFind: false,

? ? ? ? ? ? ? ? lettersListIdArr: []

? ? ? ? ? ? };

? ? ? ? },

? ? ? ? created() {

? ? ? ? ? ? this.searchNames = '';

? ? ? ? ? ? this.lettersListIdArr = [];

? ? ? ? ? ? this.lettersList = [];

? ? ? ? ? ? this.getDept();

? ? ? ? },

? ? ? ? computed: {

? ? ? ? ? ? resultIdArr() {

? ? ? ? ? ? ? ? let arr = [];

? ? ? ? ? ? ? ? this.deptData.forEach(depts => {

? ? ? ? ? ? ? ? ? ? depts.userList.forEach(list => {

? ? ? ? ? ? ? ? ? ? ? ? if (list.isChecked) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? arr.push({

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? id: list.id,

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? name: list.name

? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? return arr;

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? methods: {

? ? ? ? ? ? letterPageBtnFn(){

? ? ? ? ? ? ? ? this.noFind = false;

? ? ? ? ? ? ? ? this.letterPageShow=false;

? ? ? ? ? ? ? ? this.searchNames = '';

? ? ? ? ? ? ? ? this.lettersListIdArr = [];

? ? ? ? ? ? ? ? this.lettersList = [];

? ? ? ? ? ? },

? ? ? ? ? ? lettersListToggle(item, index) {

? ? ? ? ? ? ? ? this.$refs.lettersListCheckboxes[index].toggle();

? ? ? ? ? ? ? ? let itemId = item.id;

? ? ? ? ? ? ? ? let checked = this.lettersListIdArr.find(id => itemId == id);

? ? ? ? ? ? ? ? let data = {};

? ? ? ? ? ? ? ? let i = 0;

? ? ? ? ? ? ? ? this.deptData.forEach((depts, depIndex) => {

? ? ? ? ? ? ? ? ? ? let isMyChild = false;

? ? ? ? ? ? ? ? ? ? depts.userList.forEach(el => {

? ? ? ? ? ? ? ? ? ? ? ? if(el.id == itemId){

? ? ? ? ? ? ? ? ? ? ? ? ? ? el.isChecked = checked;

? ? ? ? ? ? ? ? ? ? ? ? ? ? isMyChild = true;

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? if(isMyChild){

? ? ? ? ? ? ? ? ? ? ? ? let allChecked = depts.userList.every(list => list.isChecked);

? ? ? ? ? ? ? ? ? ? ? ? depts.isChecked = allChecked;

? ? ? ? ? ? ? ? ? ? ? ? data = depts;

? ? ? ? ? ? ? ? ? ? ? ? i = depIndex;

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? this.deptData.splice(i, 1, data);

? ? ? ? ? ? },

? ? ? ? ? ? //部門全選

? ? ? ? ? ? allSingleChange(checked, index) {

? ? ? ? ? ? ? ? let userList = this.deptData[index].userList;

? ? ? ? ? ? ? ? let idArr = [];

? ? ? ? ? ? ? ? userList.forEach(item => {

? ? ? ? ? ? ? ? ? ? item.isChecked = checked;

? ? ? ? ? ? ? ? ? ? idArr.push(item.id);

? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? this.$set(this.deptData[index], "userList", userList);

? ? ? ? ? ? },

? ? ? ? ? ? //部門單選

? ? ? ? ? ? SingleChecked(itemList, index) {

? ? ? ? ? ? ? ? let userList = this.deptData[index].userList;

? ? ? ? ? ? ? ? let allChecked = userList.every(list => list.isChecked);

? ? ? ? ? ? ? ? this.$set(this.deptData[index], "isChecked", allChecked);

? ? ? ? ? ? },

? ? ? ? ? ? //頭部返回按鈕

? ? ? ? ? ? goBack() {

? ? ? ? ? ? ? ? //需要帶選中的列表

? ? ? ? ? ? ? ? this.searchNames = "";

? ? ? ? ? ? ? ? this.getDept();

? ? ? ? ? ? ? ? this.noFind = false;

? ? ? ? ? ? ? ? this.letterPageShow = false;

? ? ? ? ? ? ? ? this.lettersList = [];

? ? ? ? ? ? ? ? this.lettersListIdArr = [];

? ? ? ? ? ? ? ? this.$emit("closePage");

? ? ? ? ? ? },

? ? ? ? ? ? //確定添加

? ? ? ? ? ? addStaff() {

? ? ? ? ? ? ? ? //直接關(guān)閉彈窗

? ? ? ? ? ? ? ? this.letterPageShow = false;

? ? ? ? ? ? ? ? this.$emit("upMaiList", this.resultIdArr);

? ? ? ? ? ? ? ? this.searchNames = "";

? ? ? ? ? ? ? ? this.getDept();

? ? ? ? ? ? },

? ? ? ? ? ? //過(guò)濾數(shù)組

? ? ? ? ? ? filterCopy(arr) {

? ? ? ? ? ? ? ? let result = {};

? ? ? ? ? ? ? ? let finalResult = [];

? ? ? ? ? ? ? ? for (let i = 0; i < arr.length; i++) {

? ? ? ? ? ? ? ? ? ? result[arr[i].id] = arr[i];

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? for (let j in result) {

? ? ? ? ? ? ? ? ? ? finalResult.push(result[j]);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? return finalResult;

? ? ? ? ? ? },

? ? ? ? ? ? //打開搜索彈窗

? ? ? ? ? ? toSearch() {

? ? ? ? ? ? ? ? this.letterPageShow = true;

? ? ? ? ? ? ? ? this.noFind = false;

? ? ? ? ? ? },

? ? ? ? ? ? //部門分類

? ? ? ? ? ? getDept() {

? ? ? ? ? ? ? ? this.isShow = true;

? ? ? ? ? ? ? ? this.successFlag = true;

? ? ? ? ? ? ? ? reqDepartMent()

? ? ? ? ? ? ? ? ? ? .then(res => {

? ? ? ? ? ? ? ? ? ? ? ? if (res.code == 200) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.isShow = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.successFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.deptData = res.body;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.deptData.forEach(item => {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$set(item, "isChecked", false);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? item.userList.forEach(list => {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$set(list, "isChecked", false);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$toast("數(shù)據(jù)獲取失敗");

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.isShow = true;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.successFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.errorFlag = true;

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? .catch(err => {

? ? ? ? ? ? ? ? ? ? ? ? this.$toast("服務(wù)器錯(cuò)誤");

? ? ? ? ? ? ? ? ? ? ? ? this.isShow = true;

? ? ? ? ? ? ? ? ? ? ? ? this.successFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? this.errorFlag = true;

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? },

? ? ? ? ? ? searchBtn() {

? ? ? ? ? ? ? ? this.isShow = true;

? ? ? ? ? ? ? ? this.successFlag = true;

? ? ? ? ? ? ? ? if (!this.searchNames) this.searchNames = null;

? ? ? ? ? ? ? ? reqLetter({

? ? ? ? ? ? ? ? ? ? ? ? names: this.searchNames

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? .then(res => {

? ? ? ? ? ? ? ? ? ? ? ? if (res.code == 200) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.isShow = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.successFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.letters = res.body;

? ? ? ? ? ? ? ? ? ? ? ? ? ? if (res.body.length <= 0) {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.noFind = true;

? ? ? ? ? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? this.noFind = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? ? ? ? ? let data = res.body;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.lettersList = data;

? ? ? ? ? ? ? ? ? ? ? ? ? ? data.forEach(item => {

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? let arr = this.resultIdArr.filter(el => item.id == el.id);

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? arr[0] && this.lettersListIdArr.push(arr[0].id);

? ? ? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.letterPageShow = true;

? ? ? ? ? ? ? ? ? ? ? ? } else {

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.$toast("數(shù)據(jù)獲取失敗");

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.isShow = true;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.successFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? ? ? this.errorFlag = true;

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? })

? ? ? ? ? ? ? ? ? ? .catch(err => {

? ? ? ? ? ? ? ? ? ? ? ? this.$toast("服務(wù)器錯(cuò)誤");

? ? ? ? ? ? ? ? ? ? ? ? this.isShow = true;

? ? ? ? ? ? ? ? ? ? ? ? this.successFlag = false;

? ? ? ? ? ? ? ? ? ? ? ? this.errorFlag = true;

? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? },

? ? ? ? ? ? isChinese: function (temp) {

? ? ? ? ? ? ? ? var re = /[^\u4E00-\u9FA5]/;

? ? ? ? ? ? ? ? if (re.test(temp)) {

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? return true;

? ? ? ? ? ? },

? ? ? ? ? ? isChar: function (char) {

? ? ? ? ? ? ? ? var reg = /[A-Za-z]/;

? ? ? ? ? ? ? ? if (!reg.test(char)) {

? ? ? ? ? ? ? ? ? ? return false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? return true;

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? components: {

? ? ? ? ? ? headerBar,

? ? ? ? ? ? Loading

? ? ? ? }

? ? };

</script>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市埠帕，隨后出現(xiàn)的幾起案子垢揩，更是在濱河造成了極大的恐慌，老刑警劉巖敛瓷，帶你破解...
沈念sama閱讀 212,029評(píng)論 6贊 492
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件叁巨，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡呐籽，警方通過(guò)查閱死者的電腦和手機(jī)锋勺，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 90,395評(píng)論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)绝淡，“玉大人宙刘，你說(shuō)我怎么就攤上這事±谓停” “怎么了悬包？”我有些...
開封第一講書人閱讀 157,570評(píng)論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)馍乙。經(jīng)常有香客問(wèn)我布近，道長(zhǎng)垫释，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 56,535評(píng)論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任撑瞧，我火速辦了婚禮棵譬，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘预伺。我一直安慰自己订咸，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 65,650評(píng)論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開白布酬诀。她就那樣靜靜地躺著脏嚷，像睡著了一般。火紅的嫁衣襯著肌膚如雪瞒御。梳的紋絲不亂的頭發(fā)上父叙，一...
開封第一講書人閱讀 49,850評(píng)論 1贊 290
城市分裂傳說(shuō)
那天，我揣著相機(jī)與錄音肴裙，去河邊找鬼趾唱。笑死，一個(gè)胖子當(dāng)著我的面吹牛蜻懦，可吹牛的內(nèi)容都是我干的甜癞。我是一名探鬼主播，決...
沈念sama閱讀 39,006評(píng)論 3贊 408
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼宛乃，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼带欢！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起烤惊，我...
開封第一講書人閱讀 37,747評(píng)論 0贊 268
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎吁朦，沒(méi)想到半個(gè)月后柒室，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 44,207評(píng)論 1贊 303
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡逗宜，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 36,536評(píng)論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年雄右，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纺讲。...
茶點(diǎn)故事閱讀 38,683評(píng)論 1贊 341
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡擂仍，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出熬甚，到底是詐尸還是另有隱情逢渔，我是刑警寧澤，帶...
沈念sama閱讀 34,342評(píng)論 4贊 330
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布乡括，位于F島的核電站肃廓，受9級(jí)特大地震影響智厌，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜盲赊，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 39,964評(píng)論 3贊 315
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一铣鹏、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧哀蘑，春花似錦诚卸、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,772評(píng)論 0贊 21
一樁弒父案合溺，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)。三九已至脊髓，卻和暖如春辫愉，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背将硝。一陣腳步聲響...
開封第一講書人閱讀 32,004評(píng)論 1贊 266
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工恭朗，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人依疼。一個(gè)月前我還...
沈念sama閱讀 46,401評(píng)論 2贊 360
代替公主和親
正文我出身青樓痰腮，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親律罢。傳聞我的和親對(duì)象是個(gè)殘疾皇子膀值，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 43,566評(píng)論 2贊 349

vue +vant 實(shí)現(xiàn)復(fù)選框 全選和單選

推薦閱讀更多精彩內(nèi)容

vue +vant 實(shí)現(xiàn)復(fù)選框全選和單選