fix: table修改

zhangxiao

2024-08-23 3a28df1eccec424a37649cca968bce59739e0b35

 src/views/oneThree/comprehensive/index.vue

@@ -34,6 +34,46 @@
            ></the-box-card>
        </div>
        <div>
            <a-card class="card-box">
                <the-img-card></the-img-card>
                <div class="card-box-right">
                    <div>
                        <a-space>
                            <a-button type="primary" size="mini">上访</a-button>
                            <a-button type="primary" status="danger" size="mini">涉毒</a-button>
                        </a-space>
                    </div>

                    <div>
                        <a-space>
                            <icon-book />
                            <icon-bar-chart />
                        </a-space>
                    </div>
                </div>
            </a-card>
        </div>
        <div>
            <the-a-table
                :columns="columns"
                :data="data"
                :pagination="false"
                :checkedValue="checkedValue"
                :colOpenShow="true"
                :showSelection="false"
                @selTableCol="selTableCol"
            >
                <template #index="{ record, rowIndex, column }">
                    {{ rowIndex + 1 }}
                </template>
                <template #action="{ record, rowIndex, column }">
                    <a-button type="text" size="small">查看</a-button>
                    <a-button type="text" size="small">管理</a-button>
                    <a-button type="text" size="small">关闭</a-button>
                </template>
            </the-a-table>
        </div>
        <div>
            <a-pagination :total="50" show-total show-jumper show-page-size />
        </div>
    </div>
@@ -113,6 +153,72 @@
        closes: 54
    }
]);

//列表
const columns = [
    {
        title: "序号",
        key: "1",
        dataIndex: "index",
        slotName: "index",
        width: 80
    },
    {
        title: "Name",
        dataIndex: "name",
        key: "2"
    },
    {
        title: "Address",
        dataIndex: "address",
        key: "3"
    },
    {
        title: "Email",

        dataIndex: "email",
        key: "4"
    },
    {
        title: "操作",
        key: "5",
        slotName: "action",
        width: 200
    }

    // 更多列...
];

const checkedValue = ref<string[]>(["序号", "Name", "Email", "操作"]);

// const onChange = (checkedValues: string[]) => {
//     console.log("checked = ", checkedValues);
//     checkedValue.value = checkedValues;
// };

const data = [
    {
        id: "1",
        name: "John Doe",
        age: 32,
        email: "john@example.com",
        address: "New York No. 1 Lake Park"
    },
    {
        id: "2",
        name: "Jane Smith",
        age: 28,
        email: "jane@example.com",
        address: "London No. 1 Lake Park"
    }
    // 更多数据项...
];

const selTableCol = (val: any) => {
    checkedValue.value = val;
    console.log(val);
};

const handleClick = (item: any) => {
    console.log(item, 888);
};
@@ -123,8 +229,19 @@

<style lang="scss" scoped>
.comprehensive {
    padding: 20px;
    .top-title {
        display: flex;
    }
    .card-box {
        width: 391px;
        height: 202px;
        border-radius: 5px;
    }
    .card-box-right {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
    }
}
</style>