vuetifyjs表格复选回显

最新推荐文章于 2024-08-30 09:35:29 发布

不忘初xin.1111

最新推荐文章于 2024-08-30 09:35:29 发布

阅读量373

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Yangxuxux/article/details/117997625

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表格

<div>
          <v-data-table
          height="500px"
          :headers="btnHeaders"
          :items="btnDesserts"
          show-select
          hide-default-footer
          class="elevation-1 mt-2"
          :loading="loading"
          loading-text="加载中... 请稍等"
          @input="selectBtn"
          :value="btnSelectDesserts"
        >
        </v-data-table>
        </div>

//列名
btnHeaders: [
          {
            text: '按钮名称',
            align: 'center',
            sortable: false,
            value: 'buttonName',
          },
          {
            text: '按钮标识',
            align: 'center',
            sortable: false,
            value: 'buttonKey',
          },
          {
            text: '描述',
            align: 'center',
            sortable: false,
            value: 'description',
          }
        ],
//列值
btnDesserts:[],
//选中的数据
btnSelectDesserts:[],
//已选中的数据
selectBtnList:[],


//选中方法
selectBtn(row){
        this.selectBtnList=row
      },


//赋值
getBtnList(){
        this.loading=true
        this.$api.system.role.listByMenu({roleId:this.roleId,menuId:this.selectMenuId}).then((res) => {
          if (res.code == 200) {
            this.btnDesserts=res.data.allList
            this.btnSelectDesserts=res.data.ownList
            this.loading=false
          }
        })
        .catch((err) => {
          this.loading=false
          console.log(err);
        });
      },