若依vue顯示表格列配置，可配置操作權限

若依vue顯示表格列配置，可配置操作權限
1、在 export default 中設置導出列信息

2、在工具欄增加操作按鈕

3、表格列增加顯示條件配置

4、顯示效果

4.1 有權限用戶使用效果

 4.2 無權限用戶使用效果

在vue頁面增加/修改以下3部分的設置，可以使若依vue頁面列表支持顯示列的配置，並可以根據配置的權限來限制具有該操作權限的人使用。 

1、在 export default 中設置導出列信息
在export default的data中設置列信息columns，其中key表示列的唯一索引，label表示在配置窗口中的顯示名稱，visible表示默認是否顯示該列，true表示顯示，false為不顯示。

<script>
import { listAuthlog } from "@/api/coll/authlog";
 
export default {
  name: "Authlog",
  data() {
    return {
      // 遮罩層
      loading: true,
      // 導出遮罩層
      exportLoading: false,
      // 選中數組
      ids: [],
      // 非單個禁用
      single: true,
      // 非多個禁用
      multiple: true,
      // 顯示搜索條件
      showSearch: true,
      // 總條數
      total: 0,
      authlogList: [],
      // 彈出層標題
      title: "",
      // 是否顯示彈出層
      open: false,
      // 查詢參數
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        authId: null,
        unionid: null,
        nickname: null,
      },
      // 列信息
      columns: [
          { key: 0, label: `授權ID`, visible: false },
          { key: 1, label: `賬號標識`, visible: true },
          { key: 2, label: `應用標識`, visible: false },
          { key: 3, label: `昵稱`, visible: true },
          { key: 4, label: `訪問token`, visible: true },
          { key: 5, label: `刷新token`, visible: true },
          { key: 6, label: `用戶授權范圍`, visible: false }
      ],
      // 表單參數
      form: {},
      // 表單校驗
      rules: {
        authId: [
          { required: true, message: "授權ID不能為空", trigger: "blur" }
        ],
        unionid: [
          { required: true, message: "唯一標識不能為空", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查詢列表 */
    getList() {
      this.loading = true;
      listAuthlog(this.queryParams).then(response => {
        this.authlogList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
};
</script>
2、在工具欄增加操作按鈕
在工具欄右面增加操作標簽right-toolbar，@queryTable="getList" 表示工具欄刷新按鈕對應的操作是getList；:columns="columns"表示顯示/隱藏列可以操作的列，對應第1步驟中的列信息配置； v-hasPermi="['collect:authlog:edit']表示具有collect:authlog:edit權限的用戶可見並使用該操作工具欄。

<el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['coll:authlog:export']"
        >導出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns" v-hasPermi="['coll:authlog:edit']"></right-toolbar>
    </el-row>
3、表格列增加顯示條件配置
表格列增加顯示條件配置v-if="columns[index].visible"，index表示第一步配置的columns中每個列對應的key。

<el-table v-loading="loading" :data="authlogList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="日志ID" width="70" align="center" prop="authlogId" />
      <el-table-column label="授權ID" align="center" prop="authId" key="authId" v-if="columns[0].visible" />
      <el-table-column label="賬號標識" align="center" prop="unionid" v-if="columns[1].visible" />
      <el-table-column label="應用標識" align="center" prop="openid" v-if="columns[2].visible" />
      <el-table-column label="昵稱" align="center" prop="nickname" v-if="columns[3].visible" />
      <el-table-column label="訪問token" width="300" align="center" prop="accessToken" v-if="columns[4].visible" />
      <el-table-column label="刷新token" width="300" align="center" prop="refreshToken" v-if="columns[5].visible" />
      <el-table-column label="用戶授權范圍" align="center" prop="authScope" v-if="columns[6].visible" />
      <el-table-column label="狀態" width="70" align="center" prop="status">
        <template slot-scope="scope" >
          <el-tag type="success" v-if="scope.row.status=='0'">成功</el-tag>
          <el-tag type="danger" v-if="scope.row.status=='1'">失敗</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="備注" align="center" prop="remark" />
    </el-table>
4、顯示效果
4.1 有權限用戶使用效果

 

4.2 無權限用戶使用效果

 

 

————————————————
版權聲明：本文為CSDN博主「孔子-說」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/carefree31441/article/details/119929326