前端——》vue框架之使用antdv元件庫(一些元件的高階用法)

語言: CN / TW / HK

一:a-checkbox-group多選框的賦值與取值

效果

在這裡插入圖片描述 如圖所示,這是一個彈窗,彈窗中是多選框。而且不僅包含了多選框,還包含了時間元件

實現程式碼

頁面

```html ``` js

```typescript import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn')

export default { data () { return { loading: false, visible: false, confirmLoading: false, form: { qualification: [] }, qualificationDate: null, rules: {}, qualificationOptions: [], dateFormat: 'YYYY-MM-DD' } }, methods: { async edit (record) { this.visible = true this.loading = true try { this.form.id = record.id // 從後臺取到資質列表 const arr = await xxx.query( {}, { showLoading: false, showSuccess: false, showFailure: false } ) // 定義兩個list分別存下拉框的選項 和 繫結的選項 this.qualificationOptions = [] this.form.qualification = [] arr.forEach(optionsMap => { const optionsNode = { id: null, qualification: { id: optionsMap.id, name: optionsMap.name }, qualificationEndAt: null, qualificationStartAt: null } // 回顯 record.staffQualifications.forEach(map => { if (optionsNode.qualification.id === map.qualification.id) { optionsNode.id = map.id optionsNode.qualificationEndAt = moment(map.qualificationEndAt, 'YYYY-MM-DD') optionsNode.qualificationStartAt = moment(map.qualificationStartAt, 'YYYY-MM-DD') this.form.qualification.push(optionsNode) } }) this.qualificationOptions.push(optionsNode) }) } catch (error) { console.error(error) } this.loading = false }, handleSubmit () { this.confirmLoading = true const staffQualifications = [] this.form.qualification.forEach(item => { const qualification = { id: item.qualification.id } const staffQualification = { qualification: qualification, qualificationStartAt: item.qualificationStartAt !== undefined ? item.qualificationStartAt.format('YYYY-MM-DD HH:mm:ss') : null, qualificationEndAt: item.qualificationEndAt !== undefined ? item.qualificationEndAt.format('YYYY-MM-DD HH:mm:ss') : null } staffQualifications.push(staffQualification) }) const requestModel = { id: this.form.id, staffQualifications: staffQualifications } try { // 提交 await xxx.updateQualification(requestModel, { showLoading: false }) this.confirmLoading = false this.handleClose() this.$emit('ok') } catch (error) { this.confirmLoading = false } } else { return false } }, handleClose () { if (this.$refs['StaffQualification'] !== undefined) { this.$refs['StaffQualification'].resetFields() } this.visible = false } } } ```

二:# a-select複選框的搜尋與樣式優化

效果

在這裡插入圖片描述 在這裡插入圖片描述 如圖所示,在antdv的表格中,有涉及到下拉多選的需求,並且將選中的結果在單元格內一行展示,滑鼠滑動觀之。

程式碼

表格單元格的程式碼

html <template slot="editMorning" slot-scope="node"> <a-select :dropdownMatchSelectWidth="true" :filter-option="filterOption" @change="onCellChange(node.AM, $event)" mode="multiple" :showArrow="false" :options="node.AM.staffOptions" :default-value="node.AM.staffChooses" style="width: 110px"/> </template>

上面的屬性稍微解釋一下: 屬性 | 釋義 -------- | ----- mode="multiple" | 多選 :dropdownMatchSelectWidth="true" | 下拉選單和選擇器同寬 :filter-option="filterOption" | 對輸入的內容進行篩選過濾,filterOption是方法名 @change="onCellChange(node.AM, $event)" | 下拉框值改變事件,$event是下拉框已選擇的值(包括本次點選選中) :showArrow="false"|是否顯示下拉小箭頭(我這裡寫的否,因為我感覺下拉箭頭不美觀) :options="node.AM.staffOptions"|下拉框中的選項,一般是[{label:姓名,value:1}]格式的 :default-value="node.AM.staffChooses"|已選中的值,一般是[1,2,3]格式的

typescript // 下拉框賦值等常規操作就不說了 // 下拉框值改變事件 onCellChange (node, value) { const dataSource = [...this.queryResult] // 找到表格中這一行這一個單元格的值 let target dataSource.forEach(record => { if (record[node.date][(node.timeInterval === 'AM' ? 'AM' : 'PM')].index === node.index) { target = record[node.date][(node.timeInterval === 'AM' ? 'AM' : 'PM')] } }) if (target) { // 值替換 target['staffIds'] = value this.queryResult = dataSource } }, // 下拉框搜尋過濾 filterOption (input, option) { return ( option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0 ) }, 將選中的值顯示在一行

```css

```

三:a-table表格的行列合併

效果

在這裡插入圖片描述

程式碼

表頭列合併

typescript columns = { title: node.date, dataIndex: node.date, key: node.date, width: 260, children: [ { title: '上午', dataIndex: node.date, key: node.AM, width: 130, scopedSlots: { customRender: 'editMorning' } }, { title: '下午', dataIndex: node.date, key: node.PM, width: 130, scopedSlots: { customRender: 'editAfternoon' } } ] } 表頭列合併的關鍵就是這個 children 欄位。

行合併

```typescript // data中定義 columns: { title: '生產批號/任務編號', width: 100, dataIndex: 'taskName', key: 'taskName', fixed: 'left', customRender: (text, record, index) => { const obj = { children: text !== null ? text : '', attrs: {} } obj.attrs.rowSpan = this.mergeCells(text, this.queryResult, 'taskName', index) return obj } }

// methods中定義,合併表格 mergeCells (text, data, key, index) { // 上一行該列資料是否一樣 if (index !== 0 && text === data[index - 1][key]) { return 0 } let rowSpan = 1 // 判斷下一行是否相等 for (let i = index + 1; i < data.length; i++) { if (text !== data[i][key]) { break } rowSpan++ } return rowSpan }, ```

四:DatePicker 日期選擇框和Calendar日曆的使用

日期選擇器的賦值與取值

效果

在這裡插入圖片描述

實現方式

如圖所示日期選擇框的實現程式碼如下所示 html程式碼如下: html <a-date-picker v-model="form.taskStartAt" :format="dateFormat" style="width: 100%" /> js程式碼如下

typescript import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') export default { data () { return { form: { taskStartAt: null } } }, methods: { async init (record) { // ... // 賦值 this.form.taskStartAt = moment(record.taskStartAt, 'YYYY-MM-DD') }, submit () { //取值 const taskStartAt = this.form.taskStartAt.format('YYYY-MM-DD') } } }

四:日曆的實現

效果

在這裡插入圖片描述

實現方式

html

```html

``` js

typescript import moment from 'moment' import 'moment/locale/zh-cn' moment.locale('zh-cn') export default { data () { return { calendarDataList: [] } }, methods: { async init () { // 以下的值是模擬的,真實的值可以從後臺取 const scheduleList = [ {scheduleDate: "2021-07-01", status: "WORK"}, {scheduleDate: "2021-07-02", status: "WORK"}, {scheduleDate: "2021-07-03", status: "REST"}, {scheduleDate: "2021-07-04", status: "REST"}, {scheduleDate: "2021-07-05", status: "WORK"} ] this.calendarDataList = scheduleList }) }, getListData (value) { const listData = [] this.calendarDataList.forEach(node => { if (node.date === value.format('YYYY-MM-DD')) { listData.push(node) } }) return listData || [] } } }