262 lines
6.6 KiB
Vue
262 lines
6.6 KiB
Vue
<template>
|
||
<pro-table
|
||
ref="table"
|
||
title="列表"
|
||
:request="getList"
|
||
:columns="columns"
|
||
:search="searchConfig"
|
||
:pagination="paginationConfig"
|
||
@selectionChange="handleSelectionChange"
|
||
>
|
||
<!-- 工具栏 -->
|
||
<template #toolbar>
|
||
<el-button type="primary" icon="el-icon-delete" @click="batchDelete">
|
||
批量删除
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-plus"
|
||
@click="$router.push('/test/add')"
|
||
>
|
||
添加一条
|
||
</el-button>
|
||
<el-button type="primary" icon="el-icon-refresh" @click="refresh">
|
||
刷新
|
||
</el-button>
|
||
</template>
|
||
<template #operate="scope">
|
||
<el-button size="mini" type="primary">编辑</el-button>
|
||
<el-button size="mini" type="danger">删除</el-button>
|
||
</template>
|
||
</pro-table>
|
||
</template>
|
||
|
||
<script>
|
||
import { defineComponent, reactive, ref, toRefs } from "vue";
|
||
|
||
export default defineComponent({
|
||
name: "testList",
|
||
setup() {
|
||
const state = reactive({
|
||
// 表格列配置，大部分属性跟el-table-column配置一样
|
||
columns: [
|
||
{ type: "selection" },
|
||
{ label: "序号", type: "index" },
|
||
{ label: "名称", prop: "nickName", sortable: true, width: 180 },
|
||
{ label: "邮箱", prop: "userEmail" },
|
||
{
|
||
label: "操作",
|
||
fixed: "right",
|
||
width: 180,
|
||
align: "center",
|
||
tdSlot: "operate", // 自定义单元格内容的插槽名称
|
||
},
|
||
],
|
||
// 搜索配置
|
||
searchConfig: {
|
||
labelWidth: "90px", // 必须带上单位
|
||
inputWidth: "360px", // 必须带上单位
|
||
fields: [
|
||
{
|
||
type: "text",
|
||
label: "账户名称",
|
||
name: "nickName",
|
||
defaultValue: "abc",
|
||
},
|
||
{
|
||
type: "textarea",
|
||
label: "描述",
|
||
name: "description",
|
||
},
|
||
{
|
||
label: "状态",
|
||
name: "status",
|
||
type: "select",
|
||
defaultValue: 1,
|
||
options: [
|
||
{
|
||
name: "已发布",
|
||
value: 1,
|
||
},
|
||
{
|
||
name: "未发布",
|
||
value: 0,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "性别",
|
||
name: "sex",
|
||
type: "radio",
|
||
options: [
|
||
{
|
||
name: "男",
|
||
value: 1,
|
||
},
|
||
{
|
||
name: "女",
|
||
value: 0,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "城市",
|
||
name: "city",
|
||
type: "radio-button",
|
||
options: [
|
||
{
|
||
name: "北京",
|
||
value: "bj",
|
||
},
|
||
{
|
||
name: "上海",
|
||
value: "sh",
|
||
},
|
||
{
|
||
name: "广州",
|
||
value: "gz",
|
||
},
|
||
{
|
||
name: "深圳",
|
||
value: "sz",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
label: "爱好",
|
||
name: "hobby",
|
||
type: "checkbox",
|
||
defaultValue: ["吃饭"],
|
||
options: [
|
||
{
|
||
name: "吃饭",
|
||
value: "吃饭",
|
||
},
|
||
{
|
||
name: "睡觉",
|
||
value: "睡觉",
|
||
},
|
||
{
|
||
name: "打豆豆",
|
||
value: "打豆豆",
|
||
},
|
||
],
|
||
// transform: (val) => val.join(","),
|
||
},
|
||
{
|
||
label: "水果",
|
||
name: "fruit",
|
||
type: "checkbox-button",
|
||
options: [
|
||
{
|
||
name: "苹果",
|
||
value: "苹果",
|
||
},
|
||
{
|
||
name: "香蕉",
|
||
value: "香蕉",
|
||
},
|
||
{
|
||
name: "橘子",
|
||
value: "橘子",
|
||
},
|
||
{
|
||
name: "葡萄",
|
||
value: "葡萄",
|
||
},
|
||
],
|
||
transform: (val) => val.join(","),
|
||
},
|
||
{
|
||
label: "日期",
|
||
name: "date",
|
||
type: "date",
|
||
},
|
||
{
|
||
label: "时间",
|
||
name: "datetime",
|
||
type: "datetime",
|
||
defaultValue: "2020-10-10 8:00:00",
|
||
},
|
||
{
|
||
label: "日期范围",
|
||
name: "daterange",
|
||
type: "daterange",
|
||
trueNames: ["startDate", "endDate"],
|
||
},
|
||
{
|
||
label: "时间范围",
|
||
name: "datetimerange",
|
||
type: "datetimerange",
|
||
trueNames: ["startTime", "endTime"],
|
||
style: { width: "360px" },
|
||
defaultValue: ["2020-10-10 9:00:00", "2020-10-11 18:30:00"],
|
||
},
|
||
{
|
||
label: "数量",
|
||
name: "num",
|
||
type: "number",
|
||
min: 0,
|
||
max: 10,
|
||
},
|
||
],
|
||
},
|
||
// 分页配置
|
||
paginationConfig: {
|
||
layout: "total, prev, pager, next, sizes", // 分页组件显示哪些功能
|
||
pageSize: 5, // 每页条数
|
||
pageSizes: [5, 10, 20, 50],
|
||
style: { textAlign: "left" },
|
||
},
|
||
selectedItems: [],
|
||
batchDelete() {
|
||
console.log(state.selectedItems);
|
||
},
|
||
// 选择
|
||
handleSelectionChange(arr) {
|
||
state.selectedItems = arr;
|
||
},
|
||
// 请求函数
|
||
async getList(params) {
|
||
console.log(params);
|
||
// params是从组件接收的，包含分页和搜索字段。
|
||
const { data } = await new Promise((rs) => {
|
||
setTimeout(() => {
|
||
rs({
|
||
code: 200,
|
||
data: {
|
||
list: [
|
||
{
|
||
id: 1,
|
||
nickName: "zhangsan",
|
||
userEmail: "zhangsan@xx.com",
|
||
},
|
||
{
|
||
id: 2,
|
||
nickName: "lisi",
|
||
userEmail: "lisi@xx.com",
|
||
},
|
||
],
|
||
total: 100,
|
||
},
|
||
});
|
||
}, 3000);
|
||
});
|
||
|
||
// 必须要返回一个对象，包含data数组和total总数
|
||
return {
|
||
data: data.list,
|
||
total: +data.total,
|
||
};
|
||
},
|
||
});
|
||
const table = ref(null);
|
||
const refresh = () => {
|
||
table.value.refresh();
|
||
};
|
||
|
||
return { ...toRefs(state), refresh, table };
|
||
},
|
||
});
|
||
</script>
|