Ant-Design-Vue

应用成果先看下默认成果 反对按钮超过肯定数量主动放到【更多】下拉按钮外面 按钮反对动态控制是否禁用，是否显示。 上面是一个代码示例。export default Vue.extend({ data() { return { dataSource: [ { id: 1, username: '张三', disabled: 1 }, { id: 2, username: '李四', disabled: 0 }, { id: 3, username: '王二麻子', disabled: 0 }, ] as MyData[], columns: [ // { title: '#', dataIndex: 'id' }, { title: '姓名', dataIndex: 'username' }, { title: '状态', dataIndex: 'disabled', customRender: (value: number) => { return value === 0 ? ( <a-tag color="green">启用</a-tag> ) : ( <a-tag>禁用</a-tag> ); }, }, useActionButtons<MyData>({ align: 'center', title: '操作', limit: 0, showDivider: false, buttons: [ { icon: 'search', text: '查看' }, { icon: 'edit', text: '编辑' }, { text: '禁用', visible: (record) => record.disabled === 0, }, { text: '启用', visible: (record) => record.disabled === 1, }, { icon: 'message', text(record, index) { return `未读音讯（${record.id.toString()}）`; }, }, { icon: 'delete', text: '删除', disabled: (record) => record.disabled === 0, click: (record, index) => { this.$confirm({ content: `确认删除${record.username}吗？`, }); }, }, ], }), ], }; },});介绍用法type useActionButtons = (config: ActionButtonsConfig) => Table.Column;原理就是通过一个函数，返回了一个带customRender的列的配置。 ...

前言：vue中应用ant-design-vue的rangPicker组件时，mode设置为date时，disabledDate属性失常，可通过返回true或者false设置以后工夫是否禁止点击。当mode设置为month或者year时，disableDate属性生效，为实现大于以后日期的月不能点击，或者小于起始日期的月不能点击可通过获取以后dom的内容，进行判断设置month-disabled类名进而实现mode为非date时的禁用成果。具体代码如下：1、template <a-range-picker :disabled-date="disabledDate" :value="month" style="width:240px" :mode="rangeType === 'month' ? ['month', 'month'] : ['date', 'date']" :format="(current === 1 || current === 2) && rangeType === 'month' ? 'YYYYMM' : 'YYYY-MM-DD'" @panelChange="handlePanelChangeMonth" @openChange="openChange" @change="calendarChange" :placeholder="['开始日期', '完结日期']" />2、data设置 data(){ return { rangeType:'month', month: [], }}3、methods中 disabledDate(current) { // Can not select days before today and today let flag = current && current > moment().endOf('day') ? true : false // console.log(444, current, flag) return flag }, //月份批改 handlePanelChangeMonth(value) { let currentDate = value.concat([]) // console.log('handlePanelChangeMonth=', value) // 以后抉择第一个日期小于上次抉择的第一个日期 let rangeType = this.rangeType let rangeValue = [] let isBeforeOne = moment(value[0]).isBefore(this.month[0]) let diff = moment(value[0]).diff(this.month[0], rangeType) // console.log(isBeforeOne, diff) if (isBeforeOne) { // rangeValue第一个值 = 原值-差值 rangeValue[0] = this.sliderValue[0] - diff } else { rangeValue[0] = this.sliderValue[0] + diff } let isBeforeTwo = moment(value[1]).isBefore(this.month[1]) let diff2 = moment(value[1]).diff(this.month[1], rangeType) if (isBeforeTwo) { // rangeValue第一个值 = 原值-差值 rangeValue[1] = this.sliderValue[0] - diff2 } else { rangeValue[1] = this.sliderValue[0] + diff2 } // console.log('diff==', diff, diff2, rangeValue) this.afterChange = false this.month = [currentDate[0], currentDate[1]] this.sliderValue = rangeValue if (this.current === 2) { this.getCwList() } }, openChange() { setTimeout(() => { if (this.rangeType === 'month') { this.endDisabled() this.startDisabled() this.calendarChange() } }) /* 新增-- 解决面板翻页禁用生效问题 */ // 关上日期面板增加翻页事件 // this.yearPanelPageChange() }, // 年份禁用完结工夫 endDisabled() { this.$nextTick(() => { const year = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[1].innerText let currentYear = moment(new Date()).year() //当 const table = document.getElementsByClassName('ant-calendar-month-panel-tbody') // 所有完结年份 const endList = table[1].querySelectorAll('td') endList.forEach((item, ind) => { if (year < currentYear) { item.classList.remove('month-disabled') return } let currentMonth = moment(new Date()).month() //以后月-1 // console.log('item.innerText==', item, item.innerText) // console.log(ind, currentMonth, ind - currentMonth > 0) if (item.innerText < this.month[0] || ind - currentMonth > 0) { item.setAttribute('class', 'month-disabled') } else { item.classList.remove('month-disabled') } }) }) }, // 年份开始日期禁用 startDisabled() { this.$nextTick(() => { const table = document.getElementsByClassName('ant-calendar-month-panel-tbody') // 所有开始年份 const startList = table[0].querySelectorAll('td') startList.forEach(item => { if (item.innerText > this.month[1]) { item.setAttribute('class', 'month-disabled') } else { item.classList.remove('month-disabled') } }) }) }, // 待选日期发生变化的回调 calendarChange() { if (this.rangeType === 'month') { const yearDom = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[1] // console.log('change', yearDom) // DOMCharacterDataModified： 监听dom内容变动 yearDom.addEventListener('DOMCharacterDataModified', () => { // console.log('year change') this.endDisabled() }) } },4、style设置 ...

版本信息ant-design-vue 1.x ant-design-vue目前是提供了这些款式 而后我感觉应该有个很常见的是须要一个黄色正告的按钮 冀望的用法当然就是type="warning"啦。 话不多说，间接上代码。 在我的项目里增加一个less文件 @import '~ant-design-vue/lib/style/themes/default.less';@import '~ant-design-vue/lib/button/style/mixin.less';.create-type(@type,@bgColor,@textColor:white) { .ant-btn { &-@{type} { .button-variant-primary(@textColor;@bgColor); } &-background-ghost&-@{type} { .button-variant-ghost(@bgColor); } }}.create-type(warning, #ffae00);而后就能够在我的项目中这样应用了 <a-button type="warning">warning</a-button><a-button type="warning" ghost>warning+ghost</a-button> 注意事项须要开启less-loader的javascriptEnabled选项 vue-cli我的项目参考上面代码 module.exports = { css:{ loaderOptions:{ less:{ javascriptEnabled:true } } }}