[JavaScript知识库] vue3中element plus el-table-v2组件的使用

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3中element plus el-table-v2组件的使用 -> 正文阅读

[JavaScript知识库]vue3中element plus el-table-v2组件的使用

? <el-auto-resizer style="width: 100%; height: 500px">

? ? <template #default="{ height, width }">

? ? ? <el-table-v2 :columns="columns" :data="dataState.tableData" :width="width" :height="height" fixed />

? ? </template>

? </el-auto-resizer>

</template>

import { h, onMounted, reactive } from "vue";

import { ElButton } from "element-plus";

import { areaList } from "@/api";

import formatDateTime from "@/utils/dateFormat";

const dataState = reactive({

? tableData: []

})

onMounted(() => { getApiData() })

const getApiData = async () => {

? const { data } = await areaList()

? dataState.tableData = data.areaVoList

}

const columns = [

? { key: "showId", dataKey: "showId", title: "序号", width: 80, fixed: true },

? { key: "areaName", dataKey: "areaName", title: "区域名称", width: 100, fixed: true },

? { key: "areaDescribe", dataKey: "areaDescribe", title: "区域描述", width: 100, fixed: true },

? { key: "areaType", dataKey: "areaType", title: "区域类型", width: 100, fixed: true },

? { key: "createTime", dataKey: "createTime", title: "创建日期", width: 200, fixed: true, cellRenderer: ({ rowData }) => formatDateTime(rowData.createTime) },

? { key: "updateTime", dataKey: "updateTime", title: "修改日期", width: 200, fixed: true, cellRenderer: ({ rowData }) => formatDateTime(rowData.updateTime) },

? {

? ? key: 'operations', title: "操作", width: 100, align: "center", cellRenderer: (data) =>

? ? ? h(

? ? ? ? ElButton,

? ? ? ? { onClick: () => 删除方法名(data), type: "danger" },

? ? ? ? { default: () => "删除" }

? ? ? ),

? },

];

</script>