ant组件+vue2 快速搭建自用模板（不断更新中）

按钮 <a-button>

常见 

<a-button type="primary">蓝色按钮</a-button>
<a-button type="danger">红色按钮</a-button>

图标 <a-icon>

常见

<a-icon type="left" />
<a-icon type="right" />
<a-icon type="search" />

间距 <a-space>

常见

  
 <a-space :size="size">
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="link">Link</a-button>
  </a-space>

export default {
  data() {
    return {
      size: 'small', // small 小 middle 中 Large大
    };
  },
};

分页 <a-pagination>

常见

需要配合 a-table 使用 一般 表格设置    :pagination="false" 即可

<a-table :pagination="false"></a-table> 
       
 <div style="text-alinge:right">
          <a-pagination @showSizeChange="onPageSizeChangeTop" 
                        @change="handleTableChange" 
                        :show-total="total => `共 ${total}条记录 第${pagination}页`" 
                        :total="total" show-size-changer    
                        show-quick-jumper />
</div>

            total:0,       //总数
            pagination: 1, //当前页 
            limittion: 10, //页/条数 

//方法
onPageSizeChangeTop(i, val) {  //分条
            this.limittion = val  //每页/条数
            this.pagination = 1 //当前页  恢复  ==1
            this.getList() //获取数据方法
          },

handleTableChange(pagination, filters, sorter) { //分页
            this.pagination = pagination  //当前页
            this.getList()//获取数据方法
          },  -->

自带分页:pagination="pagination"

核心  :pagination="pagination"  rowKey="id"  @change="tablePaginationChange" 

原文链接 https://blog.csdn.net/yunxixiao/article/details/123796212

<a-table :columns="columnsxiang" :data-source="dataxiang" :pagination="pagination"  
            rowKey="id"  @change="tablePaginationChange">
            <a slot="name" slot-scope="text">{{ text }}</a>
            <template slot="rdisSearchTime" slot-scope="text">
                <span>{{ $moment(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
</a-table>




  const  pagination= {
            current: 1,
            total: 0, // 总数
            showSizeChanger: true,
            pageSizeOptions: ['1', '10', '20', '40', '80', '100'],
            showTotal: total => `共 ${total} 条`, // 分页中显示总的数据
            pageSize: 5 // 每页条数，所有页设置统一的条数

             // hideOnSinglePage: true, // 只有一页时是否隐藏分页器
            // defaultCurrent: 1,
 }


return{
            pagination,
 } 


//方法
tablePaginationChange (pagination) {
            // console.log(pagination)
            this.pagination.current = pagination.current  // 重新设置当前页
            this.pagination.pageSize = pagination.pageSize
 }, 

分页的封装<a-pagination>

1、封装组件

<!-- 分页器的封装 -->
<template>
    <div class="pagination">
        <a-pagination  show-size-changer show-quick-jumper 
         
        :page-size="tiaoshu" 
        :current="yeshu" 
        :total="zongshu"
        :page-size-options="pageSizeOptions"
        :default-current="1"

            :show-total="(total, range) => `共 ${total} 条记录 第 ${range[0]}-${range[1]} 条`" @change="onPageChangeTop"
            @showSizeChange="onPageSizeChangeTop" />
    </div>
</template>
<script>
export default {
    data() {
        return {
            // pageNumTop: 1,//当前页
            // pageSizeTop: 10,//页/条
            // // total: 0,
            // pageSizeOptions: ['5', '20', '30', '40'], //先写死 后期需要可改
        }
    },
    props: {
        zongshu: {//分页总数
            type: Number,
            default: 0
        },
        yeshu: {//当前页
            type: Number,
            default: 1
        },
        tiaoshu: {//页/条
            type: Number,
            default: 10
        },
        pageSizeOptions: {  
            type: Array,
            default() {
                return ['10', '20', '30', '40', '50'];
            }
        },
    },
	
    mounted() {
    },
    methods: {
        onPageChangeTop(i,val) {//页
            // console.log(i)
            // console.log(val)
            this.$emit('onShowSizeChange', i,val);
        },
        onPageSizeChangeTop(i, val) {//条
            // this.pageSizeTop = val
            // this.pageNumTop = 1
            this.$emit('onShowSizeChange', 1,val);

        },

    }
}
</script>
<style lang="less" scoped></style>

2、使用

<template>
     <pagination
    :yeshu="pageNumTop"
    :tiaoshu="pageSizeTop"
    :zongshu="totalCountTop"
    :pageSizeOptions="pageSizeOptions"
    @onShowSizeChange="onShowSizeChange"
    >
    </pagination>
</template>

<script>
import pagination from '../common/pagination'
export default {
    components: {
      pagination
    },
    data() {
        pageNumTop: 1, //当前页
        pageSizeTop: 10, //页/条
        totalCountTop: 0, //分页总数
        pageSizeOptions: ['10', '20', '30', '40'],

    }
}

    methods: {
  // 分页改变时调用组件里的方法    onShowSizeChange 是通过 子组件通过 
     //this.$emit('onShowSizeChange', 1,val);传递过来的


onShowSizeChange(current, pageSize) { 
      console.log(current, pageSize)
      this.pageNumTop = current
      this.pageSizeTop = pageSize
      this.goSearch()//改变完 重新渲染数据

},

    }

</script>

使用组件

多选框 <a-checkbox-group>

常见

    <a-checkbox-group
            style="width: 300px;display: flex;"
            v-model="value"
            name="checkboxgroup"
            :options="plainOptions"
            @change="onChange"
          />

 value: [],
 plainOptions: [],  //后端获取的多选 数据 


  onChange(checkedValues) {
      this.value = checkedValues   //多选框 勾选的数据 
      console.log('checked = ', checkedValues);
      console.log('value = ', this.value);  
  },

单选框 <a-radio-group> 

常用

<template>
  <div>

    <a-radio-group v-model="value2" :options="options" @change="onChange2" />

  </div>
</template>
<script>

const options = [
  { label: 'Apple', value: 'Apple' },
  { label: 'Pear', value: 'Pear' },
  { label: 'Orange', value: 'Orange' },
];

export default {
  data() {
    return {
      options,
    };
  },
  methods: {
    onChange2(e) {
      console.log('radio2 checked', e.target.value);
    },
 
  },
};
</script>

多选选择器 <a-select>

常见

（typedata的数据 格式）

【

{key ：？？，value？？}

{key ：？？，value？？}

{key ：？？，value？？}

】

<template>
  <div>

  <a-select v-model="rjzLx" placeholder="请选择类型">
                  <a-select-option v-for="(item, index) in typedata" :key="index"             
                   :value="item.text">
                    {{ item.text }}
                    </a-select-option>
   </a-select>

  </div>
</template>
<script>


export default {
  data() {
    return {
          rjzLx: undefined,
       typedata: '',//下拉框数据
    };
  },
  mounted() {
    dictCombo('/DICT/BIGDATA/ZHGL/LX').then(res => {//获取类型下拉数据的方法
      this.typedata = res.data
    })
 
  },

  methods: {

 
  },
};
</script>

表格<a-table>

（常用）

   <a-table :columns="columns" :data-source="data" :pagination="false" rowKey="rdiUuid">
        <!-- <template slot="cuowu" slot-scope="text, record">
                <span>{{ (record.gaiRequestErrorCount / record.gaiRequestTotalCount) * 100 }}%</span>
                </template>
                <template slot="gilRecentlyUpdateContent">
                    <span>近监测最近24小时内异常访问次数超出阈值,请及时检查</span>
                </template>
                <template slot="gilUpdateName">
                    <span>终端</span>
                </template>
                <template slot="gsmaCreateTime" slot-scope="text">
                    <span ref="gsmaWarnTime">{{ $moment(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template> -->
        <template slot="action" slot-scope="text, record">
          <a-button type="primary" class="btn_" @click="editcha(record)">详情</a-button>
        </template>
      </a-table>


  columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 60,
          ellipsis: true,
          align: 'center',
          customRender: (text, record, index) => (this.pageNumTop - 1) * this.pageSizeTop + index + 1
        },
     
        {
          dataIndex: 'interfaceTodayNum',
          key: 'interfaceTodayNum',
          title: '今日调用次数',
          sorter: (a, b) => a.interfaceTodayNum - b.interfaceTodayNum,
          ellipsis: true,
          align: 'center',
          width: 120,
          // width: 250,
          scopedSlots: {customRender: 'interfaceTodayNum'}
        },

        {
          dataIndex: 'interfaceMonthNum',
          key: 'interfaceMonthNum',
          ellipsis: true,
          title: '当月调用量',
          sorter: (a, b) => a.interfaceMonthNum - b.interfaceMonthNum,
          align: 'center',
          width: 120,
          // width: 150,
          scopedSlots: {customRender: 'interfaceMonthNum'}
        },
        {
          dataIndex: 'interfaceNumber',
          key: 'interfaceNumber',
          ellipsis: true,
          sorter: (a, b) => a.interfaceNumber - b.interfaceNumber,
          title: '累计调用次数',
          align: 'center',
          width: 120,
          scopedSlots: {customRender: 'interfaceNumber'}
        },
        {
          dataIndex: 'action',
          key: 'action',
          title: '操作',
          align: 'center',
          width: '270px',
          scopedSlots: {customRender: 'action'}
        }
      ],


   data: []




   editcha(e) {
      //查看
      this.$router.push({
        path: '/interfacecall-edit',
        query: {
          rdiUuid: e.rdiUuid,
          rdiName: e.rdiName
        }
      })
    },


 goSearch() {    //搜索
      getInterfaceCountInfoByCnd({
        pageNumber: this.pageNumTop,
        limit: this.pageSizeTop,
        interfaceName: this.interfaceName
      }).then(res => {
        this.totalCountTop = res.count
        this.data = res.data
      })
    },

标签 <a-tag>

      <a-tag color="pink">
        pink
      </a-tag>
      <a-tag color="red">
        red
      </a-tag>
      <a-tag color="orange">
        orange
      </a-tag>
      <a-tag color="green">
        green
      </a-tag>
      <a-tag color="cyan">
        cyan
      </a-tag>
      <a-tag color="blue">
        blue
      </a-tag>
      <a-tag color="purple">
        purple
      </a-tag>

      <a-tag color="#f50">
        #f50
      </a-tag>
      <a-tag color="#2db7f5">
        #2db7f5
      </a-tag>
      <a-tag color="#87d068">
        #87d068
      </a-tag>
      <a-tag color="#108ee9">
        #108ee9
      </a-tag>

树形控件<a-tree>
 

全局提示$message

成功
      this.$message.success('This is a success message');
 
  失败
      this.$message.error('This is an error message');

    警告
      this.$message.warning('This is a warning message');
 

对话框<a-modal>

@click="showModal"

<a-modal title="编辑" :body-style="bodystyle"   :visible="visible"  width="650px"      
      @ok="handleOk" @cancel="handleCancel">
        <template slot="footer">
          <a-button type="primary"  @click="handleOk">确定</a-button>
          <a-button @click="handleCancelone">关闭</a-button>
        </template>
</a-modal>


   visible: false,
   bodystyle: {
        height: '700px',
      },


methods: {
    showModal() {//打开弹窗
      this.visible = true;
    },
    handleOk(e) {//弹窗确定
      this.visible = false;
      
    },
    handleCancel(e) {//弹窗关闭
      this.visible = false;
    },
    handleCancelone(){//关闭
      this.visible = false;
    }
  }

树形控件<a-tree>

 可以看原文链接 vue antdesig a-tree组件使用详解_@阿呜的博客-CSDN博客

<a-tree
        v-if='goodsClassData.length' //v-if是判断有数据了再渲染组件，可以解决展开无效问题
        :expandedKeys='expandedKeys' //默认展开的key，是个数组
        show-line //显示连接线
        :tree-data='goodsClassData'
        :replaceFields='replaceFields'
        @expand='handleExpand' //展开节点事件
        @select='onSelect'
        >
        <a-icon slot='switcherIcon' type='down' />  //倒三角展开符，其他展开符号看文档
</a-tree>


export default {
 data () {
    return {
      replaceFields:{
     children:'child', title:'gc_name', key:'gc_id' // 看你的接口返回字段是什么，对应匹配就行了
      },
    }
  },
}


//展开，
handleExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
},

//选中
onSelect(selectedKeys, info) {
// console.log(selectedKeys, info)
},

时间范围 开始-结束<a-date-picker>

 <a-date-picker
    @change="onChangeRangeDatesta"
 v-model="startValue"
 :disabled-date="disabledStartDate"
 format="YYYY-MM-DD"
 placeholder="请输入开始时间"
 @openChange="handleStartOpenChange"
 show-time   //展示 是否有   此刻 选择时间 确定功能 
/>
/>-
<a-date-picker
 @change="onChangeRangeDateend"
 v-model="endValue"
 :disabled-date="disabledEndDate"
 format="YYYY-MM-DD"
 placeholder="请输入结束时间"
 :open="endOpen"
 @openChange="handleEndOpenChange"
 show-time   //展示 是否有   此刻 选择时间 确定功能 
/>



startValue: null, //开始时间
endValue: null, //结束时间
endOpen: false  //打开时间选择 关闭时间选择 



 onChangeRangeDatesta(value, dateString) {
    //开始时间
    this.startValue = dateString
  },
  onChangeRangeDateend(value, dateString) {
    //结束时间
    this.endValue = dateString
  },
  disabledStartDate(startValue) {
    //开始时间
    const endValue = this.endValue
    if (!startValue || !endValue) {
      return false
    }
    return startValue.valueOf() > endValue.valueOf()
  },
  handleStartOpenChange(open) {
    //开始时间
    if (!open) {
      this.endOpen = true
    }
  },
  disabledEndDate(endValue) {
    //结束时间
    const startValue = this.startValue
    if (!endValue || !startValue) {
      return false
    }
    return startValue.valueOf() >= endValue.valueOf()
  },
  handleEndOpenChange(open) {
    //结束时间
    this.endOpen = open
  }

删除提示框纯js (this.$confirm)

let that = this
this.$confirm({
  centered: true,
  title: '删除提示',
  content: '确定要删除吗？',
  okText: '确定',
  okType: 'primary',
  cancelText: '取消',
  onOk() {


    <!-- 这里开始写自己的逻辑 这里是点击确定的时候 -->
    removeRbJszydlglAgkmByIdList({ strList: that.uuiddata }).then(res => {
      if (res.success) {
        that.$message.success('删除成功')
        that.uuiddata = []
        that.expandedRowKeys = []
        that.recover()
      } else {
        that.$message.success('删除失败')
        that.uuiddata = []
        that.expandedRowKeys = []
      }

    <!-- 这里开始写自己的逻辑 -->


    })
  },
  onCancel() { }
})

普通提示框 <a-popconfirm>

<a-popconfirm title="再次确认:忽略" ok-text="确定" cancel-text="取消" @confirm="confirmout(record)"
  @cancel="cancel">
  <a-button style="margin-right: 10px;" class="btn_">忽略</a-button>
</a-popconfirm>



confirmout(e) {//确定气泡框
    this.outeditcha(e)    //这里写点击了确定后要做的事情 我这里是发了个请求
},


outeditcha(e) {//忽略 接口的方法
    let data = this.$moment(this.$moment(e.gsmaCreateTime).format('YYYY-MM-            
             DD')).subtract(1, "days").format("YYYY-MM-DD")
    let param = {
        gsmaWarnTime: data,
        gsmaWarnType: e.gsmaWarnType,
        gsmaServerIp: e.gsmaServerIp,
    }
    updateGsmaDetail(param).then(res => {
        if (res.success) {
            this.$message.success('忽略成功')

        } else {
            this.$message.success(res.data.message)
        }
        this.goSearch(); //重新搜索                              
    })
}