element ui table组件的二次封装

ruby_____________

已于 2023-09-14 15:00:44 修改

阅读量122

点赞数

文章标签： ui vue.js javascript

于 2023-09-14 09:45:43 首次发布

本文链接：https://blog.csdn.net/m0_73575305/article/details/131728662

版权

<el-table

:size="tableData.size || 'mini'"

v-loading="loading"

:data="list"

:border="tableData.border || false"

@selection-change="handleSelectionChange"

height="100%"

<el-table-column

v-if="tableData.selection"

type="selection"

width="50"

align="center"

<el-table-column v-if="tableData.radio" label="选择" width="55">

<el-radio

class="common_table_radio"

v-model="radioVal"

@change="tableRadioChange(scope.row)"

:label="

tableData.radioKey ? scope.row[tableData.radioKey] : scope.$index

></el-radio>

</template>

</el-table-column>

<el-table-column

:key="index"

:index="index"

:label="item.label"

:prop="item.prop"

:align="item.align || 'left'"

:show-overflow-tooltip="item.showOverflowTooltip || true"

:width="item.width || 'auto'"

:min-width="item.minWidth || 'auto'"

:fixed="item.fixed || false"

v-if="HasPermi(item.hasPermi)"

<slot

v-if="item.slot"

:name="item.slot"

:prop="scope.row[item.prop]"

:row="scope.row"

:scope="scope"

<span v-else>{{

scope.row[item.prop] || scope.row[item.prop] === 0

? scope.row[item.prop]

: "--"

}}</span>

</template>

</el-table-column>

</template>

<el-table-column

v-if="tableData.handleShow && tableData.buttons.length > 0"

class-name="small-padding fixed-width"

label="操作"

align="center"

:fixed="tableData.handleFixed || 'right'"

:width="tableData.handleWidth || '150'"

<el-button

class="buttons"

v-for="(btn, index) in tableData.buttons"

:key="index"

v-show="!(btn.hideVal && btn.hideVal.includes(scope.row[btn.prop]))"

v-hasPermi="btn.hasPermi"

:type="btn.type || 'text'"

:size="btn.size || 'mini'"

:icon="btn.icon"

@click="btn.handle(scope.row)"

>{{ btn.title }}</el-button

<!-- <slot

name="button"

:prop="scope.row[item.prop]"

/> -->

</template>

</el-table-column>

</el-table>

<pagination

class="pagination"

v-if="!tableData.queryParamsNoShow"

v-show="total > 0"

:total="total"

:page.sync="tableData.queryParams.pageNum"

:limit.sync="tableData.queryParams.pageSize"

@pagination="handlePageSize"

</div>

</template>

import auth from "@/plugins/auth.js";

import CryptoJSUtils from "@/utils/CryptoJSUtils.js";

export default {

props: ["tableData", "tableRadio"],

data() {

return {

loading: false,

radioVal: false,

// tableData: {

// selection: false, // 是否多选，默认false

// handleShow: true, // 是否展示操作列，默认true

// api: "common", // 数据API

// url: "listUser", // 请求地址api

// queryParams: {

// // 查询参数

// pageNum: 1,

// pageSize: 10,

// },

// buttons: [

// {

// type: "text", // 按钮类型

// size: "mini", // 按钮大小

// icon: "el-icon-edit", // 按钮图标

// hasPermi: ["system:user:edit"], // 按钮权限关键字

// handle: this.handleUpdate, // 按钮执行的方法

// },

// {

// type: "text", // 按钮类型

// size: "mini", // 按钮大小

// icon: "el-icon-delete", // 按钮图标

// hasPermi: ["system:user:remove"], // 按钮权限关键字

// handle: this.handleDelete, // 按钮执行的方法

// },

// ],

// columns: [

// {

// label: "用户编号",

// prop: "userId",

// },

// {

// label: "用户名称",

// prop: "userName",

// },

// ], // 表头

// },

list: [], // 表内容

total: 0,

};

computed: {

columns() {

//解决v-for表头会倒序的问题

// return this.tableData.columns.reverse();

return this.tableData.columns;

mounted() {

this.getList();

this.radioVal = this.tableRadio; //回显单选值

watch: {

tableRadio: {

handler() {

this.radioVal = this.tableRadio; //回显单选值

immediate: true,

methods: {

getList(queryParams) {

//获取list

this.loading = true;

// 若使用默认数据可直接传入

if (this.tableData.list) {

this.list = this.tableData.list;

this.total = this.tableData.total;

this.loading = false;

} else {

this.$api[this.tableData.api]

[this.tableData.url]({

...this.tableData.queryParams,

...queryParams,

})

.then((res) => {

// console.log(

// "decrypt(res.data)==>",

// CryptoJSUtils.decrypt(res.data)

// );

// let result=CryptoJSUtils.decrypt(res.data)

this.list = res.data.rows;

this.total = res.data.total;

this.loading = false;

this.radioVal = this.tableRadio; //回显单选值

this.$emit("getList", this.list);

this.$emit("total", this.total);

})

.catch((err) => {

this.loading = false;

});

}

HasPermi(per) {

if (per) {

return auth.hasPermi(per[0]);

} else {

return true;

}

handleSelectionChange(selection) {

this.$emit("handleSelectionChange", selection);

tableRadioChange(row) {

this.$emit("tableRadioChange", row);

handlePageSize(page) {

this.$emit("pageSizeChange", {

pageNum: page.page,

pageSize: page.limit,

});

this.getList();

// 表格重置刷新

refresh() {

this.$nextTick(() => {

this.getList();

});

};

</script>

.common_table {

width: 100%;

height: calc(100% - 80px);

.buttons {

margin-right: 5px;

}

</style>

  </template>
 <CommonTable :tableData="tableData" ref="get">
        <template #state="child">
          <el-tag :type="setStateTag(child.prop)">{{
            setState(child.prop)
          }}</el-tag>
        </template>
        <template #title="child">
          <div>
            <span :class="setClass(child)">
              &nbsp;&nbsp; {{ setTitleTag(child) }} &nbsp;&nbsp;
            </span>
            {{ child.row.title }}
          </div>
        </template>
      </CommonTable>     

</template>
<script>
export default {
data() {
    return {
tableData: {
        handleWidth: "250px",
        handleShow: true,
    
        api: "subsystem", // 数据API
        url: "getUnitedFront", // 请求地址api
        queryParams: {
          // 查询参数
          pageNum: 1,
          pageSize: 10,
          classify: "2",
          title: "",
          state: "",
          startTime: "",
          endTime: "",
        },

        columns: [
          {
            label: "标题",
            prop: "title",
            slot: "title",
          },
          {
            label: "创建人",
            prop: "createBy",
          },
          {
            label: "创建时间",
            prop: "createTime",
          },
          {
            label: "发布时间",
            prop: "releaseTime",
          },
          {
            label: "状态",
            prop: "state",
            slot: "state",
          },
        ], // 表头

        buttons: [
          {
            prop: "state",
            hideVal: [1],
            title: "发布",

            hasPermi: ["show:showUnitedFront:updateState"], // 按钮权限关键字
            handle: this.handleIssue, // 按钮执行的方法
          },
          {
            prop: "state",
            hideVal: [1],
            title: "编辑",
            hasPermi: ["show:showUnitedFront:edit"], // 按钮权限关键字
            handle: this.handleUpdate, // 按钮执行的方法
          },
          {
            title: "详情",
            handle: this.handleDetail, // 按钮执行的方法
          },

          {
            prop: "state",
            hideVal: [0, 2],
            title: "下架",
            hasPermi: ["show:showUnitedFront:updateState"], // 按钮权限关键字
            handle: this.handleSoldOut, // 按钮执行的方法
          },
          {
            title: "删除",
            hasPermi: ["show:showUnitedFront:remove"], // 按钮权限关键字
            handle: this.handleDelete, // 按钮执行的方法
          },
          {
            prop: "topState",
            title: "置頂",
            hideVal: [1],
            hasPermi: ["show:showUnitedFront:updateTop"], // 按钮权限关键字
            handle: this.handleTop, // 按钮执行的方法
          },
          {
            prop: "topState",
            title: "取消置頂",
            hideVal: [0],
            hasPermi: ["show:showUnitedFront:updateTop"], // 按钮权限关键字
            handle: this.cancel, // 按钮执行的方法
          },
        ],
        itemName: "state",
      },
}
}
}
</script>

ruby_____________

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
element ui table组件的二次封装

/ hasPermi: ["system:user:remove"], // 按钮权限关键字。// hasPermi: ["system:user:edit"], // 按钮权限关键字。// icon: "el-icon-delete", // 按钮图标。// icon: "el-icon-edit", // 按钮图标。// type: "text", // 按钮类型。// type: "text", // 按钮类型。
复制链接

扫一扫