javascript el-button 切换icon图标和label

javascript el-button 切换icon图标和label
​​​​​​javascript el-button 切换icon图标和label_第1张图片

 <el-button type="danger" size="small" @click="showall()"> <i :class="iconClass">i>${btn_label}el-button>
 
     data() {
         return {
             fullscreenLoading: false,
             // 表格数据
             danger_list: [],
             warn_list: [],

             btn_label:'收起',
             isActive:false,
         }
     },
     computed: {
        iconClass(){
          return this.isActive ? 'el-icon-add-location' : 'el-icon-delete-location';
        },
      },
     methods: {
          showall(){
            var that = this;
            this.isActive = !this.isActive;
            let listArr = JSON.parse(JSON.stringify(this.danger_list))
            if(that.btn_label == '收起'){
              listArr.forEach(item => {
                item.hide = true;
              })
              that.btn_label = '展开';
            }
            else{
              listArr.forEach(item => {
                item.hide = false;
              })
              that.btn_label = '收起';
            }
            that.danger_list = listArr;
          },
  
          // 隐藏今日关注表格
          hideTodayTable(item) {
            if (!item.hide) {
              this.$set(item, 'hide', true)
              return
            }
            this.$set(item, 'hide', false)
          },
          
          // 获取页面数据
          getDataList() {
            let that = this;
            var data = {
              page: that.currentPage,
              size: that.pageSize,
              aid: that.aid,
              dep: that.dep,
              _token: '{{ csrf_token() }}'
            };

            that.fullscreenLoading = true
            $.ajax({
              url: "/admin/todayfollow/get_data",
              type: "GET",
              data: data,
              dataType: 'json',
              success: function(res) {
                that.danger_list = res.danger_data;
                that.warn_list = res.warn_data;
                that.fullscreenLoading = false
              },
              error: function(error) {
                console.log('请求失败');
                console.log(error);
                that.fullscreenLoading = false
              }
            });
          },
 
     },

你可能感兴趣的:(javascript,开发语言,ecmascript)