Pied-design-ui

Appearance

Return to top
On this page

表格

基本使用

用户 年龄 身高 地址
liuyongqi18187西湖区湖底公园1号
yangwenwu17187西湖区湖底公园2号
fangshiyu20187西湖区湖底公园3号
zhuwei21187西湖区湖底公园4号
xiaodi18187西湖区湖底公园1号
代码示例
js
<template>
    <pied-table 
        data="data" 
        columns="columns"
    >
    </pied-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 0,
    userName: 'liuyongqi',
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  },
  {
    id: 1,
    userName: 'yangwenwu',
    age: 17,
    high: '187',
    address: '西湖区湖底公园2号'
  },
  {
    id: 2,
    userName: 'fangshiyu',
    age: 20,
    high: '187',
    address: '西湖区湖底公园3号'
  },
  {
    id: 3,
    userName: 'zhuwei',
    age: 21,
    high: '187',
    address: '西湖区湖底公园4号'
  },
  {
    id: 4,
    userName: 'xiaodi',
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  }
])

const columns = ref([
  {
    title: '用户',
    key: 'userName',
    dataIndex: 'userName',
    center: 'center',
    width: '150px'
  },
  {
    title: '年龄',
    key: 'age',
    dataIndex: 'age',
    center: 'center',
    width: '150px'
  },
  {
    title: '身高',
    key: 'high',
    dataIndex: 'high',
    center: 'center',
    width: '150px'
  },
  {
    title: '地址',
    key: 'address',
    dataIndex: 'address',
    center: 'center',
    width: '150px'
  }
])
</script>

表格边框

用户 年龄 身高 地址
liuyongqi18187西湖区湖底公园1号
yangwenwu17187西湖区湖底公园2号
fangshiyu20187西湖区湖底公园3号
zhuwei21187西湖区湖底公园4号
xiaodi18187西湖区湖底公园1号
代码示例
js
<template>
    <pied-table 
        data="data" 
        columns="columns"
    >
    </pied-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 0,
    userName: 'liuyongqi' ,
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  },
  {
    id: 1,
    userName: 'yangwenwu' ,
    age: 17,
    high: '187',
    address: '西湖区湖底公园2号'
  },
  {
    id: 2,
    userName: 'fangshiyu' ,
    age: 20,
    high: '187',
    address: '西湖区湖底公园3号'
  },
  {
    id: 3,
    userName: 'zhuwei' ,
    age: 21,
    high: '187',
    address: '西湖区湖底公园4号'
  },
  {
    id: 4,
    userName: 'xiaodi' ,
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  }
])

const columns = ref([
  {
    title: '用户',
    key: 'userName',
    dataIndex: 'userName',
    center: 'center',
    width: '150px'
  },
  {
    title: '年龄',
    key: 'age',
    dataIndex: 'age',
    center: 'center',
    width: '150px'
  },
  {
    title: '身高',
    key: 'high',
    dataIndex: 'high',
    center: 'center',
    width: '150px'
  },
  {
    title: '地址',
    key: 'address',
    dataIndex: 'address',
    center: 'center',
    width: '150px'
  }
])
</script>

表格居中/居右/居左

用户 年龄 身高 地址
liuyongqi18187西湖区湖底公园1号
yangwenwu17187西湖区湖底公园2号
fangshiyu20187西湖区湖底公园3号
zhuwei21187西湖区湖底公园4号
xiaodi18187西湖区湖底公园1号
代码示例
js
<template>
    <pied-table 
        data="data" 
        columns="columns"
    >
    </pied-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 0,
    userName: 'liuyongqi',
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  },
  {
    id: 1,
    userName: 'yangwenwu' ,
    age: 17,
    high: '187',
    address: '西湖区湖底公园2号'
  },
  {
    id: 2,
    userName: 'fangshiyu' ,
    age: 20,
    high: '187',
    address: '西湖区湖底公园3号'
  },
  {
    id: 3,
    userName: 'zhuwei' ,
    age: 21,
    high: '187',
    address: '西湖区湖底公园4号'
  },
  {
    id: 4,
    userName: 'xiaodi' ,
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  }
])

const columns = ref([
  {
    title: '用户',
    key: 'userName',
    dataIndex: 'userName',
    center: 'left',
    width: '150px'
  },
  {
    title: '年龄',
    key: 'age',
    dataIndex: 'age',
    center: 'left',
    width: '150px'
  },
  {
    title: '身高',
    key: 'high',
    dataIndex: 'high',
    center: 'right',
    width: '150px'
  },
  {
    title: '地址',
    key: 'address',
    dataIndex: 'address',
    center: 'center',
    width: '150px'
  }
])
</script>

表格数据自定义

用户 年龄 身高 地址 操作
liuyongqi18187西湖区湖底公园1号
yangwenwu17187西湖区湖底公园2号
fangshiyu20187西湖区湖底公园3号
zhuwei21187西湖区湖底公园4号
xiaodi18187西湖区湖底公园1号
代码示例
js
<template>
    <pied-table 
        data="data" 
        columns="columns"
    >
        <template #body="{column, record}">
            <template v-if="column.key === 'action'">
            <pied-button size="mini">编辑</pied-button>
            <pied-button size="mini" type="error">删除</pied-button>
            </template>
        </template>
    </pied-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 0,
    userName: 'liuyongqi',
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  },
  {
    id: 1,
    userName: 'yangwenwu' ,
    age: 17,
    high: '187',
    address: '西湖区湖底公园2号'
  },
  {
    id: 2,
    userName: 'fangshiyu' ,
    age: 20,
    high: '187',
    address: '西湖区湖底公园3号'
  },
  {
    id: 3,
    userName: 'zhuwei' ,
    age: 21,
    high: '187',
    address: '西湖区湖底公园4号'
  },
  {
    id: 4,
    userName: 'xiaodi' ,
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  }
])

const columns = ref([
  {
    title: '用户',
    key: 'userName',
    dataIndex: 'userName',
    center: 'left',
    width: '80px'
  },
  {
    title: '年龄',
    key: 'age',
    dataIndex: 'age',
    center: 'left',
    width: '50px'
  },
  {
    title: '身高',
    key: 'high',
    dataIndex: 'high',
    center: 'right',
    width: '50px'
  },
  {
    title: '地址',
    key: 'address',
    dataIndex: 'address',
    center: 'center',
    width: '150px'
  },
  {
    title: '操作',
    key: 'action',
    dataIndex: 'action',
    center: 'center',
    width: '250px',
    format: true
  }
])
</script>

表格多选

用户 年龄 身高 地址 操作
liuyongqi18187西湖区湖底公园1号
yangwenwu17187西湖区湖底公园2号
fangshiyu20187西湖区湖底公园3号
zhuwei21187西湖区湖底公园4号
xiaodi18187西湖区湖底公园1号
代码示例
js
<template>
    <pied-table 
        data="data" 
        columns="columns"
        border
        rowSelectChange="rowSelectChange"
    >
        <template #body="{column, record}">
            <template v-if="column.key === 'action'">
            <pied-button size="mini">编辑</pied-button>
            <pied-button size="mini" type="error">删除</pied-button>
            </template>
        </template>
    </pied-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 0,
    userName: 'liuyongqi',
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  },
  {
    id: 1,
    userName: 'yangwenwu' ,
    age: 17,
    high: '187',
    address: '西湖区湖底公园2号'
  },
  {
    id: 2,
    userName: 'fangshiyu' ,
    age: 20,
    high: '187',
    address: '西湖区湖底公园3号'
  },
  {
    id: 3,
    userName: 'zhuwei' ,
    age: 21,
    high: '187',
    address: '西湖区湖底公园4号'
  },
  {
    id: 4,
    userName: 'xiaodi' ,
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  }
])

const columns = ref([
    {
        title: '',
        key: '',
        width: '10px',
        select: true
    },
    {
        title: '用户',
        key: 'userName',
        dataIndex: 'userName',
        center: 'left',
        width: '80px'
    },
    {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
        center: 'left',
        width: '50px'
    },
    {
        title: '身高',
        key: 'high',
        dataIndex: 'high',
        center: 'right',
        width: '50px'
    },
    {
        title: '地址',
        key: 'address',
        dataIndex: 'address',
        center: 'center',
        width: '150px'
    },
    {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        center: 'center',
        width: '250px',
        format: true
    }
])

const rowSelectChange = (arr) => {
    console.log(arr)
}
</script>

表格排序

用户 年龄 身高 地址 操作
liuyongqi18187西湖区湖底公园1号
yangwenwu17187西湖区湖底公园2号
fangshiyu20187西湖区湖底公园3号
zhuwei21187西湖区湖底公园4号
xiaodi18187西湖区湖底公园1号
代码示例
js
<template>
    <pied-table 
        data="data" 
        columns="columns"
        border
        rowSelectChange="rowSelectChange"
    >
        <template #body="{column, record}">
            <template v-if="column.key === 'action'">
            <pied-button size="mini">编辑</pied-button>
            <pied-button size="mini" type="error">删除</pied-button>
            </template>
        </template>
    </pied-table>
</template>

<script setup>
import { ref } from 'vue'
const data = ref([
  {
    id: 0,
    userName: 'liuyongqi',
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  },
  {
    id: 1,
    userName: 'yangwenwu' ,
    age: 17,
    high: '187',
    address: '西湖区湖底公园2号'
  },
  {
    id: 2,
    userName: 'fangshiyu' ,
    age: 20,
    high: '187',
    address: '西湖区湖底公园3号'
  },
  {
    id: 3,
    userName: 'zhuwei' ,
    age: 21,
    high: '187',
    address: '西湖区湖底公园4号'
  },
  {
    id: 4,
    userName: 'xiaodi' ,
    age: 18,
    high: '187',
    address: '西湖区湖底公园1号'
  }
])

const columns = ref([
    {
        title: '',
        key: '',
        width: '10px',
        select: true
    },
    {
        title: '用户',
        key: 'userName',
        dataIndex: 'userName',
        center: 'left',
        width: '80px'
    },
    {
        title: '年龄',
        key: 'age',
        dataIndex: 'age',
        center: 'left',
        width: '50px',
        sort: true
    },
    {
        title: '身高',
        key: 'high',
        dataIndex: 'high',
        center: 'right',
        width: '50px',
        sort: true
    },
    {
        title: '地址',
        key: 'address',
        dataIndex: 'address',
        center: 'center',
        width: '150px'
    },
    {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        center: 'center',
        width: '250px',
        format: true
    }
])

const rowSelectChange = (arr) => {
    console.log(arr)
}
</script>
参数说明可选值默认值类型
data数据Array------Array
columns表头Array------Array
border边框true/falsefalseBoolean
center排列方式left/center/rightleftString
format数据自定义格式化------------------
select多选true/falsefalseBoolean
rowSelectChange------------------Function
sort排序true/falsefalseBoolean

Released under the MIT License.

Copyright © 2023-present Gerforey