sq_dataview/src/components/Table.vue

<template>
  <el-dialog v-model="dialogTableVisible" title="员工信息" width="1200" draggable :close-on-click-modal="false"
      :before-close="dialogBeforeClose">
    <div style="padding: 10px;">
        <el-input v-model="searchText2" style="color: #000 !important;" size="small" placeholder="请输入姓名搜索" clearable :clear-icon="CloseBold" />
    </div>
    <el-table :data="tableData" style="height: 500px; overflow: auto;" >
        <el-table-column
          v-for="item in modelFieldList"
          :key="item.id"
          :fixed="item.name == 'c_xm' ? true : false"
          :property="item.name"
          :label="item.alias"
          :width="150"
          show-overflow-tooltip
        />
        <el-table-column fixed="right" label="操作" min-width="120" v-if="$getUserType() == 3">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleEditClick(scope.row)">
                编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination-section">
        <span class="total-text">共{{ total }}条</span>
        <el-pagination
        layout="prev, pager, next"
        :total="total"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
        >
        </el-pagination>
    </div>
  </el-dialog>

</template>

<script>

export default {
    components: {
        
    },
    data() {
        return {
            dialogTableVisible: false,
            modelFieldList:[],
            currentPage: 1,
            pageSize: this.pageSize,
            searchText2:"",
        }
    },
    props: {
        tableData: {
            type: Array,
            default: []
        },
        columnModel: {
            type: Array,
            default: []
        },
        isview: {
            type: Boolean,
            default: false
        },
        searchText:{
            type: String,
            default: ''
        },
        close: Function,
        total: Number,
        pageSize: Number,
        page: Number,
        handlePageChange: Function,
    },
    watch: {
        tableData: {
            handler: function (newVal, oldVal) {
                // console.log("newVal:", newVal);
                this.updateTableData();
            },
            deep: true
        },
        searchText2: {
            handler: function (newVal, oldVal) {
               this.currentPage = 1;
               this.handlePageChange(this.currentPage-1,this.pageSize,newVal);
                
            },
            deep: true
        }
    },
    created() {
        let that = this;
        that.searchText2 = that.searchText;
        that.dialogTableVisible = that.isview;
        let modelFields = JSON.parse(this.columnModel.fieldList);
        // 无序
        let keys = Object.keys(modelFields);

        for (let i = 0; i < keys.length; i++) {
            let obj = modelFields[keys[i]];
            if (!obj.name) {
                obj = JSON.parse(obj);
            }
            if (obj.name.includes("c_")) {
                let itemkey = obj.name.replace(/c_/g, "");
                obj.name = 'c_' + itemkey;
            }
            that.modelFieldList.push(obj);
        }
        // console.log("that.modelFieldList:", that.modelFieldList);
        this.modelFieldList.sort((a, b) => {
            return a.index > b.index ? 1 : -1;
        });
    },
    mounted() {
        this.updateTableData();
    },
    methods: {
        updateTableData(){
            this.tableData.forEach((data) => {
                data.sfzhm = data.c_sfzhm;
                data.sjhm = data.c_sjhm;
                data.c_sfzhm = this.formatCardNumber(data.c_sfzhm);
                data.c_sjhm = this.formatPhoneNumber(data.c_sjhm);
            })
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.currentPage = 1;
            this.handlePageChange(this.currentPage-1,this.pageSize,this.searchText2);
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.handlePageChange(this.currentPage-1,this.pageSize,this.searchText2);
        },
        formatCardNumber(cardNumber) {
            if (!cardNumber) return "";
            return cardNumber.replace(/(.{8})$/, '*'.repeat(8));
        },
        formatPhoneNumber(phone) {
            if (!phone) return "";
            return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        },
        handleEditClick(row) {
            this.$parent.getContentById(row);
        },
        dialogBeforeClose() {
            this.close();
        },
       
    }
}
</script>
<style >
/* 分页控件 */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0px 15px 0px 10px;
}

.total-text {
  font-size: 14px;
}
</style>
<style lang="less" scoped>
/deep/.el-input__inner{
    color: #000;
}

</style>