亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁技術(shù)文章
文章詳情頁

Ant design vue table 單擊行選中 勾選checkbox教程

瀏覽:11日期:2022-11-12 16:39:44

最近了解Ant design 設(shè)計table 單擊行選中checkedbox功能,相比于element的 @row-click 再觸發(fā)toggleRowSelection,ant design的api就沒那么清晰了,言歸正傳

期望:Ant design table 單擊行選中 勾選checkedbox

實現(xiàn):

Ant design vue table 單擊行選中 勾選checkbox教程

單選:

onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); this.selectedRowKeys = keys; } } }}

多選:

onClickRowMulti(record) { return { on: { click: () => { let rowKeys=this.selectedRowKeys if(rowKeys.length>0 && rowKeys.includes(record.id)){ rowKeys.splice(rowKeys.indexOf(record.id),1) }else{ rowKeys.push(record.id) } this.selectedRowKeys = rowKeys; } } } }

補充知識:使用Ant Design的Table和Checkbox模擬Tree

一、小功能大需求

先看下設(shè)計圖:

Ant design vue table 單擊行選中 勾選checkbox教程

需求如下:

1、一級選中(取消選中),該一級下的二級全部選中(取消選中)

2、二級全選,對應(yīng)的一級選中,二級未全選中,對應(yīng)的一級不選中

3、支持搜索,只搜索二級數(shù)據(jù),并且只展示搜索到的數(shù)據(jù)以及對應(yīng)的一級title,如:搜索“店員”,此時一級只展示咖啡廳....其他一級隱藏,二級只展示店員,其他二級隱藏

4、搜索出來的數(shù)據(jù),一級不可選中,即不允許全選,搜索框清空時,回歸初始化狀態(tài)

5、搜索后,自動展開所有二級,默認情況下收起所有二級

看到圖的時候,第一反應(yīng)就是使用Tree就能搞定,但是翻閱了文檔后,發(fā)現(xiàn)Tree并不能全部完成,所以就只能使用其他組件進行拼裝,最后發(fā)現(xiàn)使用Table和Checkbox可以完美實現(xiàn)。

二、逐步完成需求

如果不想看這些,可直接到最后,有完整代碼。。。。。。

1、頁面構(gòu)建

這個就不用多說,只是一個簡單的Table嵌套Checkbox,具體可去查看文檔,直接貼代碼,因為是布局,所有可以忽略代碼中的事件。

注意一點:因為搜索時,會改變數(shù)據(jù),所以需要將初始化的數(shù)據(jù)進行保存。

import React, { useState, useRef, useEffect } from 'react';import { Table, Input, Checkbox } from 'antd';const { Search } = Input;export default () => { const initialData: any = useRef([]); //使用useRef創(chuàng)建initialData const [data, setData] = useState([ { key: 1, title: '普通餐廳(中餐/日料/西餐廳)', checkboxData: [ { key: 12, title: '普通服務(wù)員' }, { key: 13, title: '收銀' }, { key: 14, title: '迎賓/接待' }, ], }, { key: 2, title: '零售/快消/服裝', checkboxData: [ { key: 17, title: '基礎(chǔ)店員' }, { key: 19, title: '收銀員' }, { key: 20, title: '理貨員' }, ], }, ]); useEffect(() => { initialData.current = [...data]; //設(shè)置初始化值 }, []); const [checkedJob, setCheckedJob] = useState([]); //設(shè)置子級中選擇的類 const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //設(shè)置選擇的行 const expandedRowRender = (record: any) => { return ( <div style={{ paddingLeft: 50, boxSizing: 'border-box' }}> <p>請選擇崗位,或勾選類別全選崗位</p> <div> <Checkbox.Group value={checkedJob}> {record.checkboxData.map((item: any) => { return ( <Checkbox value={item.key} key={item.key} onChange={checkChange} > {item.title} </Checkbox> ); })} </Checkbox.Group> </div> </div> ); }; const rowSelection = { selectedRowKeys, }; return ( <div style={{ background: '#fff', padding: 24, boxSizing: 'border-box', width: 982, }} > <Search placeholder='請輸入崗位名稱' onSearch={(value) => { console.log(loop(value)); }} /> <Table showHeader={false} columns={columns} expandable={{ expandedRowRender, }} dataSource={data} pagination={false} rowSelection={rowSelection} /> </div> );};const columns = [{ title: 'title', dataIndex: 'title', key: 'title' }];

2、一級選中(取消全選)

當(dāng)一級選中(取消全選)時,需要更新對應(yīng)二級選項的狀態(tài)。在antd文檔中,使用rowSelection的onSelect,可以設(shè)置選擇/取消選擇某行的回調(diào)。

onSelect:(record,selected)=> record:操作當(dāng)前行的數(shù)據(jù),selected:true:全選,false:取消全選

注意:當(dāng)全選時,不能直接添加當(dāng)前一級下的所有二級,需要過濾掉當(dāng)前已經(jīng)選中的二級

具體邏輯如下代碼:

//首選在rowSelection配置中添加onSelectconst rowSelection = { selectedRowKeys, onSelect };//一級全選或者取消的邏輯const onSelect = (record: any, selected: any) => { //因為存在搜索,所以需要使用我們的初始化數(shù)據(jù),找到當(dāng)前record.key在初始化數(shù)據(jù)中對應(yīng)的數(shù)據(jù) let initialParent = initialData.current.find( (d: any) => d.key === record.key );//初始化數(shù)據(jù)中對應(yīng)的二級數(shù)據(jù) let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (selected) { //全選 //向selectRowKeys添加選中的值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //取消全選 //從父級數(shù)組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } };

3、二級選中或取消選中邏輯

二級選中或者取消比較簡單,只要注意在選中時,如何去考慮是否所有二級全部選中即可。具體代碼如下。

//判斷b數(shù)組中的數(shù)據(jù)是否全部在a數(shù)組中 const isContained = (a: any, b: any) => { if (!(a instanceof Array) || !(b instanceof Array)) return false; if (a.length < b.length) return false; var aStr = a.toString(); for (var i = 0, len = b.length; i < len; i++) { if (aStr.indexOf(b[i]) == -1) return false; } return true; };//設(shè)置checkbox的onChange事件 const checkChange = (e: any) => { let praentRowsKey: any; //找到選中的二級對應(yīng)的父級key initialData.current.forEach((v: any) => { if (v.checkboxData.find((d: any) => d.key === e.target.value)) { praentRowsKey = v.key; } }); if (e.target.checked) { //選中時 設(shè)置當(dāng)前的check數(shù)組 let newCheckedJob = [...checkedJob, e.target.value]; setCheckedJob(newCheckedJob); //判斷當(dāng)前二級的內(nèi)容是否全部被選中,如果全部選中,則需要設(shè)置selectedRowKeys //praentRowsKey下的所有子元素 let childArr = initialData.current .find((d: any) => d.key === praentRowsKey) ?.checkboxData?.map((i: any) => i.key); // 為當(dāng)前選擇之后的新數(shù)組 if (isContained(newCheckedJob, childArr)) { //全部包含,設(shè)置父級 setSelectedRowKeys([...selectedRowKeys, praentRowsKey]); } } else { //取消選中 設(shè)置當(dāng)前的child數(shù)組 setCheckedJob( [...checkedJob].filter((d: number) => d !== e.target.value) ); //判斷當(dāng)前父級中是否存在praentRowsKey,存在則去除 if (!!~selectedRowKeys.indexOf(praentRowsKey)) { setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== praentRowsKey) ); } } };

4、搜索過濾

前3步驟完成后,目前來說,正常的一級二級聯(lián)動已經(jīng)完成,現(xiàn)在進行第4步,搜索過濾。

簡單的說,搜索的時候,只要改變我們的data,就可以重新渲染Table,這樣就可以達成搜索過濾的效果。具體代碼如下

//Search組件搜索時,觸發(fā)更改data<Search placeholder='請輸入崗位名稱' onSearch={(value) => { setData(loop(value)); }}/> //搜索崗位時,進行過濾 const loop = (searchValue: any) => { let loopData = initialData.current?.map((item: any) => {//判斷一級是否包含該搜索內(nèi)容  let parentKey = !!~item.title.indexOf(searchValue); let childrenData: any = []; if (item.checkboxData) { //如果存在二級,則進行二級的循環(huán),過濾出搜索到的value childrenData = item.checkboxData.filter( (d: any) => !!~d.title.indexOf(searchValue) ); } //如果一級有,二級沒有,則展示一級下所有的二級  //如果一級沒有,二級有,則只展示存在的二級以及對應(yīng)的一級 //如果一級有,二級有,則展示存在的二級以及對應(yīng)的一級 //如果一級沒有,二級也沒有,則不展示 if(parentKey&&!childrenData.length){ return {title:item.title,key:item.key,checkboxData:item.checkboxData} }else if((!parentKey || parentKey)&&childrenData.length){return{title:item.title,key:item.key,checkboxData:childrenData}}else{} });//搜索的值不為空時,返回搜索過濾后都數(shù)據(jù)(因為map出來的數(shù)據(jù)中有undefined,所以需要再次進行過濾),為空時返回初始化數(shù)據(jù) return searchValue ? loopData.filter((d: any) => d) : initialData.current; };

5、搜索后,禁止一級全選和取消全選

動態(tài)控制table的選擇功能,需要使用rowSelection的getCheckboxProps。具體代碼如下。

const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //聲明一個變量,控制是否允許選擇,默認為false//在rowSelection中添加getCheckboxPropsconst rowSelection = { selectedRowKeys, onSelect, getCheckboxProps: (record: any) => ({ disabled: selectAllDisabled,//true:禁止,false:允許 }), };//在搜索的時候設(shè)置 const loop = (searchValue: any) => { ... setSelectAllDisabled(searchValue ? true : false); //當(dāng)搜索內(nèi)容為空時,因為回到的是初始值,所以需要它允許選擇,搜索內(nèi)容不為空時,禁止選擇 ... };

6、設(shè)置自動展開

前5步完成后,如果不需要設(shè)置自動展開,則該功能就可以到此結(jié)束。

設(shè)置自動展開,需要用到expandable中的onExpand以及expandedRowKeys

expandedRowKeys:展開的行,控制屬性

onExpand:點擊展開圖標(biāo)時觸發(fā),(expanded,record)=> expanded:true:展開,false:收起。record:操作的當(dāng)前行的數(shù)據(jù)

具體代碼如下:

const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //聲明變量設(shè)置展開的行,默認全都收起//table的 expandable添加 onExpand,expandedRowKeys<Table expandable={{ expandedRowRender, onExpand, expandedRowKeys, }}/>//搜索時改變狀態(tài)const loop = (searchValue: any) => { ... //有數(shù)據(jù)時自動展開所有搜索到的,無數(shù)據(jù)的時候默認全部收起 setExpandedRowKeys( searchValue ? initialData.current.map((d: any) => d.key) : [] ); ... };//控制表格的展開收起 const onExpand = (expanded: any, record: any) => { if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); //展開時,將需要展開的key添加到數(shù)組中 } else { setExpandedRowKeys( [...expandedRowKeys].filter((d: any) => d !== record.key)//收起時,將該key移除數(shù)組 ); } };三、優(yōu)化

一級選擇框有三種狀態(tài),全選,二級選中某些個,未選中,三種狀態(tài)對應(yīng)不同的樣式,如下圖所示。

Ant design vue table 單擊行選中 勾選checkbox教程

這種優(yōu)化,就需要設(shè)置rowSelection的renderCell(注意,rendercell在antd的4.1+版本才能生效),配合Checkbox進行更改。具體代碼如下。

1、設(shè)置renderCell

將我們在第二步和第五步設(shè)置的onSelect以及getCheckboxProps隱藏,再配置renderCell

const rowSelection = { selectedRowKeys, // onSelect, // getCheckboxProps: (record: any) => ({ // disabled: selectAllDisabled, // }), renderCell: (checked: any, record: any) => { //當(dāng)前record.key對應(yīng)大初始化數(shù)據(jù)的一級所有數(shù)據(jù) let parentArr = initialData?.current?.find( (d: any) => d.key === record.key ); //從所有已經(jīng)選擇過的數(shù)據(jù)中過濾出在parentArr中的數(shù)據(jù) let checkArr = parentArr?.checkboxData?.filter( (item: any) => checkedJob.indexOf(item.key) > -1 ); return ( <Checkbox indeterminate={ parentArr?.checkboxData && !!checkArr?.length && checkArr.length < parentArr.checkboxData.length ? true : false } //比較 當(dāng)過濾后選中數(shù)據(jù)的長度 < 初始化數(shù)據(jù)的長度時,設(shè)置 indeterminate 狀態(tài)為true,否則為false onClick={(e) => onClick(e, record)} checked={checked} disabled={selectAllDisabled} ></Checkbox> ); }, };

2、設(shè)置onClick事件

onClick事件其實就是原來的onSelect,具體代碼如下

const onClick = (e: any, record: any) => { //存在搜索時,需要進行處理selectParentData let initialParent = initialData.current.find( (d: any) => d.key === record.key ); let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (e.target.checked) { //向選中數(shù)組中添加key值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //從父級數(shù)組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } }; 四、完整代碼

Table+Checkbox模擬Tree完整代碼

import React, { useState, useRef, useEffect } from 'react';import { Table, Input, Checkbox } from 'antd';const { Search } = Input;export default () => { const initialData: any = useRef([]); const [data, setData] = useState([ { key: 1, title: '普通餐廳(中餐/日料/西餐廳)', checkboxData: [ { key: 12, title: '普通服務(wù)員' }, { key: 13, title: '收銀' }, { key: 14, title: '迎賓/接待' }, ], }, { key: 2, title: '零售/快消/服裝', checkboxData: [ { key: 17, title: '基礎(chǔ)店員' }, { key: 19, title: '收銀員' }, { key: 20, title: '理貨員' }, ], }, ]); useEffect(() => { initialData.current = [...data]; //設(shè)置初始化值 }, []); const [checkedJob, setCheckedJob] = useState([12]); //設(shè)置選擇的二級 const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]); //設(shè)置選擇的行 const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]); //設(shè)置展開的行 const [selectAllDisabled, setSelectAllDisabled] = useState<boolean>(false); //選擇的時候,禁止全選 //搜索崗位時,進行過濾 const loop = (searchValue: any) => { let loopData = initialData.current?.map((item: any) => { let parentKey = !!~item.title.indexOf(searchValue); let childrenData: any = []; if (item.checkboxData) { //如果存在二級,則進行二級的循環(huán),過濾出搜索到的value childrenData = item.checkboxData.filter( (d: any) => !!~d.title.indexOf(searchValue) ); } //1.如果一級有,二級沒有,則展示一級下所有的二級 //2.如果一級沒有,二級有,則只展示存在的二級以及對應(yīng)的一級 //3.如果一級有,二級有,則展示則存在的二級以及對應(yīng)的一級 //4.如果一級沒有,二級也沒有,則不展示 if (parentKey && !childrenData.length) { return { title: item.title, key: item.key, checkboxData: item.checkboxData, }; } else if ((!parentKey || parentKey) && childrenData.length) { return { title: item.title, key: item.key, checkboxData: childrenData, }; } else { } }); setSelectAllDisabled(searchValue ? true : false); //有數(shù)據(jù)時自動展開所有搜索到的,無數(shù)據(jù)的時候默認全部收起 setExpandedRowKeys( searchValue ? initialData.current.map((d: any) => d.key) : [] ); return searchValue ? loopData.filter((d: any) => d) : initialData.current; }; const isContained = (a: any, b: any) => { if (!(a instanceof Array) || !(b instanceof Array)) return false; if (a.length < b.length) return false; var aStr = a.toString(); for (var i = 0, len = b.length; i < len; i++) { if (aStr.indexOf(b[i]) == -1) return false; } return true; }; const checkChange = (e: any) => { let praentRowsKey: any; //找到點擊child到一級key initialData.current.forEach((v: any) => { if (v.checkboxData.find((d: any) => d.key === e.target.value)) { praentRowsKey = v.key; } }); if (e.target.checked) { //選中時 設(shè)置當(dāng)前的child數(shù)組 let newCheckedJob = [...checkedJob, e.target.value]; setCheckedJob(newCheckedJob); //判斷當(dāng)前child的內(nèi)容是否全部被選中,如果全部選中,則需要設(shè)置selectedRowKeys //praentRowsKey下的所有子元素 let childArr = initialData.current .find((d: any) => d.key === praentRowsKey) ?.checkboxData?.map((i: any) => i.key); // 為當(dāng)前選擇之后的新數(shù)組 if (isContained(newCheckedJob, childArr)) { //全部包含,設(shè)置父級 setSelectedRowKeys([...selectedRowKeys, praentRowsKey]); } } else { //取消選中 設(shè)置當(dāng)前的child數(shù)組 setCheckedJob( [...checkedJob].filter((d: number) => d !== e.target.value) ); //判斷當(dāng)前父級中是否存在praentRowsKey,存在則去除 if (!!~selectedRowKeys.indexOf(praentRowsKey)) { setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== praentRowsKey) ); } } }; //父節(jié)點變化時,進行的操作 // const onSelect = (record: any, selected: any) => { // //存在搜索時,需要進行處理selectParentData // let initialParent = initialData.current.find( // (d: any) => d.key === record.key // ); // let selectParentData = initialParent.checkboxData // ? initialParent.checkboxData.map((d: any) => d.key) // : []; // if (selected) { // //向選中數(shù)組中添加key值 // setSelectedRowKeys([...selectedRowKeys, record.key]); // //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾添加 // setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); // } else { // //從父級數(shù)組中移除key值 // setSelectedRowKeys( // [...selectedRowKeys].filter((d: any) => d !== record.key) // ); // //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾掉 // let newArr: any = []; // [...checkedJob].forEach((v) => { // if (selectParentData.indexOf(v) === -1) { // newArr.push(v); // } // }); // setCheckedJob(newArr); // } // }; //控制表格的展開收起 const onExpand = (expanded: any, record: any) => { //expanded: true展開,false:關(guān)閉 if (expanded) { setExpandedRowKeys([...expandedRowKeys, record.key]); } else { setExpandedRowKeys( [...expandedRowKeys].filter((d: any) => d !== record.key) ); } }; const onClick = (e: any, record: any) => { //存在搜索時,需要進行處理selectParentData let initialParent = initialData.current.find( (d: any) => d.key === record.key ); let selectParentData = initialParent.checkboxData ? initialParent.checkboxData.map((d: any) => d.key) : []; if (e.target.checked) { //向選中數(shù)組中添加key值 setSelectedRowKeys([...selectedRowKeys, record.key]); //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾添加 setCheckedJob(Array.from(new Set([...checkedJob, ...selectParentData]))); } else { //從父級數(shù)組中移除key值 setSelectedRowKeys( [...selectedRowKeys].filter((d: any) => d !== record.key) ); //更新child數(shù)組,將selectParentData中的數(shù)據(jù)全部過濾掉 let newArr: any = []; [...checkedJob].forEach((v) => { if (selectParentData.indexOf(v) === -1) { newArr.push(v); } }); setCheckedJob(newArr); } }; const expandedRowRender = (record: any) => { return ( <div style={{ paddingLeft: 50, boxSizing: 'border-box' }}> <p>請選擇崗位,或勾選類別全選崗位</p> <div> <Checkbox.Group value={checkedJob}> {record.checkboxData.map((item: any) => { return ( <Checkbox value={item.key} key={item.key} onChange={checkChange} > {item.title} </Checkbox> ); })} </Checkbox.Group> </div> </div> ); }; const rowSelection = { selectedRowKeys, // onSelect, // getCheckboxProps: (record: any) => ({ // disabled: selectAllDisabled, // }), renderCell: (checked: any, record: any) => { //當(dāng)前record.key對應(yīng)大初始化數(shù)據(jù)的一級所有數(shù)據(jù) let parentArr = initialData?.current?.find( (d: any) => d.key === record.key ); //從所有已經(jīng)選擇過的數(shù)據(jù)中過濾出在parentArr中的數(shù)據(jù) let checkArr = parentArr?.checkboxData?.filter( (item: any) => checkedJob.indexOf(item.key) > -1 ); return ( <Checkbox indeterminate={ parentArr?.checkboxData && !!checkArr?.length && checkArr.length < parentArr.checkboxData.length ? true : false } //比較 當(dāng)過濾后選中數(shù)據(jù)的長度 < 初始化數(shù)據(jù)的長度時,設(shè)置 indeterminate 狀態(tài)為true,否則為false onClick={(e) => onClick(e, record)} checked={checked} disabled={selectAllDisabled} ></Checkbox> ); }, }; return ( <div style={{ background: '#fff', padding: 24, boxSizing: 'border-box', width: 982, }} > <Search placeholder='請輸入崗位名稱' onSearch={(value) => { console.log(loop(value)); setData(loop(value)); }} /> <Table showHeader={false} columns={columns} expandable={{ expandedRowRender, onExpand, expandedRowKeys, }} dataSource={data} pagination={false} rowSelection={rowSelection} /> </div> );};const columns = [{ title: 'title', dataIndex: 'title', key: 'title' }];

以上這篇Ant design vue table 單擊行選中 勾選checkbox教程就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 国产在线观看自拍 | 国产性色视频在线高清 | 欧美国产成人精品一区二区三区 | 国产成人精品系列在线观看 | 搞黄视频免费 | 69成人做爰视频在线观看 | 国产在线不卡一区 | 一级白嫩美女毛片免费 | 99j久久精品久久久久久 | 国产区在线免费观看 | 日本黄色影片在线观看 | 97se亚洲综合在线韩国专区福利 | 久久精品国产99国产精品亚洲 | 毛片毛片毛片毛片出来毛片 | 久久国产亚洲精品麻豆 | 有码视频在线 | 成人夜色视频在线观看网站 | 尤物在线观看网站 | 久久精品人人做人人爽 | 中文字幕在线一区二区三区 | 国产白嫩在线观看视频 | 国产精品一区二区三区四区五区 | 国产成人精品aaaa视频一区 | 亚欧成人中文字幕一区 | 久久夜色精品国产尤物 | 日韩在线视频网站 | 香蕉视频美女 | 精品国产免费人成高清 | 日韩高清专区 | 亚洲 欧美 激情 另类 自拍 | 小明成人永久视频在线观看 | 亚洲精品国产第一区二区图片 | 欧美日韩一区二区三在线 | 欧美成人香蕉在线观看 | 男女午夜特黄毛片免费 | 国产成人一区二区 | 羞羞答答91麻豆网站入口 | 欧美日韩久久中文字幕 | 免费啪啪小视频 | 97超级碰碰碰碰在线视频 | 国产精品尤物在线 |