表格

代码演示

线上示例：前往查看

Preview

查看代码

<n-card title="用户列表">
    <n-table :loading="loading" :columns="columns" :data-source="dataSource" :form-state="formState" :total="formState.total" @pageChange="pageChange" :selectedRowKeys="batchDelete.selectedRowKeys" @onSelectChange="batchDelete.onSelectChange">
        <template v-slot="{scope}">
            <template v-if="scope.column.dataIndex === 'user_info'">
                <n-table-user-info :record="scope.record" />
            </template>
            <template v-if="scope.column.dataIndex === 'address_info'">
                <n-table-address :record="scope.record" />
            </template>
            <template v-if="scope.column.dataIndex === 'time'">
                <!-- <div v-html="utils.formatTime(scope.record.time)"></div> -->
                <n-table-time-format :time="scope.record.time"/>
            </template>
            <template v-if="scope.column.dataIndex == 'state'">
                <n-table-tag :state="scope.record.state"/>
            </template>
            <template v-if="scope.column.dataIndex == 'num'">
                {{ utils.toThousands(scope.record.num) }}
            </template>
            <template v-if="scope.column.dataIndex == 'money'">
                {{ utils.formatCurrency(scope.record.money) }}
            </template>
            <!-- <template v-if="scope.column.dataIndex == 'operator_info'">
                <div style="text-align: left">
                    创建人：{{scope.record.operator_name}} <br />
                    创建时间：{{scope.record.created_at.slice(2,16)}} <br />更新时间：{{scope.record.created_at.slice(2,16)}} </div>
            </template> -->
            <template v-if="scope.column.key === 'operation'">
                <n-button-group>
                    <n-button type="edit" kind="link" @click="toEdit(scope.record)"></n-button>
                    <n-button type="preview" kind="link" @click="toInfo(scope.record)"></n-button>
                    <n-button type="delete" kind="link" @click="operaDel.isVisibleDel = true, operaDel.operate_id = scope.record.id"></n-button>
                </n-button-group>
            </template>
        </template>
    </n-table>
    <Dialog v-if="operaDel.isVisibleDel" :isVisible="operaDel.isVisibleDel" :sTips="operaDel.sTips" @subTapBtn="operaDel.deleteRow"></Dialog>
</n-card>

export default {
    setup() {
        const tableConfig = reactive({
          formState: {
                page: 1,
                limit: 10,
                total: 0
            },
            columns: [
                {
                    title: '用户信息',
                    dataIndex: 'user_info',
                    fixed: 'left',
                    autoHeight: true,
                    minWidth: 180,
                    maxWidth: 250
                },
                {
                    title: '地址信息',
                    dataIndex: 'address_info',
                    fixed: 'left',
                    minWidth: 180,
                    maxWidth: 250
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    minWidth: 100,
                    maxWidth: 200
                },
                {
                    title: '操作信息',
                    dataIndex: 'operator_info',
                    align: 'center',
                    autoHeight: true,
                    width: 200
                },
                {
                    title: '状态',
                    dataIndex: 'state',
                    align: 'center',
                    width: 80
                },
                {
                    title: '操作',
                    key: 'operation',
                    fixed: 'right',
                    align: 'center',
                    width: 200
                },
          ],
          loading: false,
          dataSource: data: [
            { id: 1, age: 18, state: 1, headimgurl, num: 999, money: 100, nickname: '大象姐姐1', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 2, age: 18, state: 1, headimgurl, num: 9999, money: 106, nickname: '', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 3, age: 18, state: 0, headimgurl, num: 99999, money: 100.36, nickname: '大象姐姐3', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 4, age: 18, state: 1, headimgurl, num: 999999, money: 1000.99, nickname: '大象姐姐4', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 5, age: 18, state: 1, headimgurl, num: 9999999, money: 999, nickname: '大象姐姐5', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
          ],
          loading: false,
          pageChange: function (pagination) {
            tableConfig.formState.page = pagination.current
            tableConfig.formState.limit = pagination.pageSize
            tableConfig.getList()
          },
          getList: function () {
            tableConfig.loading = true
            tableConfig.formState.page > 0 ? tableConfig.formState.page-- : tableConfig.formState.page
            oApi.getList({
                start: (tableConfig.formState.page * tableConfig.formState.limit),
                length: tableConfig.formState.limit,
                ...tableConfig.search.data
            }).then(res => {
                tableConfig.loading = false;
                tableConfig.dataSource = res.data;
                tableConfig.formState.total = res.total;
            })
          },
          // 跳转新增页面
          toAdd: function () {
              
          },
          // 跳转编辑
          toEdit: function (record) {
              
          },
          operaDel: {
              isVisibleDel: false,
              sTips: '删除',
              operate_id: -1,
              deleteRow: function (e) {
              if (e.value) {
                  oApi.giftAjax({ rowid: tableConfig.operaDel.operate_id, action: 'delete' }).then(res => {
                  if (res) {
                      tableConfig.getList()
                  }
                  })
              }
              tableConfig.operaDel.isVisibleDel = false
              }
          },
          search: {
              arrTime: [],
              data: {
                searchwords: '',
                searchstart: '',
                searchend: '',
              },
              formItems: [
                { label: '关键字：', type: 'input', placeholder: '请输入', vModel: 'searchwords'},
                { label: '状态', type: 'select', placeholder: '请选择', vModel: 'state', options: 'oStateOptions'},
                { label: '时间：', type: 'range-picker', placeholder: '', vModel: 'arrTime'},
              ],
              searchList: () => {
              tableConfig.formState.page = 1
              tableConfig.formState.length = 10
              if (tableConfig.search.arrTime.length) {
                  tableConfig.search.data.searchstart = tableConfig.search.arrTime[0]
                  tableConfig.search.data.searchend = tableConfig.search.arrTime[1]
              }
              tableConfig.getList()
              },
              resetList: () => {
              tableConfig.formState.page = 1
              tableConfig.formState.length = 10
              tableConfig.search.arrTime = []
              for (let key in tableConfig.search.data) {
                  tableConfig.search.data[key] = ''
              }
              tableConfig.getList()
              },
      
          },
          })

        return {
            ...toRefs(tableConfig)
        }
    }
}

说明

展示样式

1. 控类型必须采用tab模式包裹，简单理解为：有限制数量;例如：类型、时间、状态；
2. 时间封装为两行；<n-table-time-format :time="scope.record.time"/>或者<div v-html="utils.formatTime(scope.record.time)"></div>
3. 头像、昵称、手机号有组件封装；<n-table-user-info :record="scope.record" />
4. 地址信息有封装; <n-table-address :record="scope.record" />
5. 状态tag有封装; <n-table-tag :state="scope.record.state"/>

Preview

查看代码

<n-card title="用户列表">
    <n-table :loading="loading" :columns="columns" :data-source="dataSource" :form-state="formState" :total="formState.total" @pageChange="pageChange">
        <template v-slot="{scope}">
            <template v-if="scope.column.dataIndex === 'user_info'">
                <n-table-user-info :record="scope.record" />
            </template>
            <template v-if="scope.column.dataIndex === 'address_info'">
                <n-table-address :record="scope.record" />
            </template>
            <template v-if="scope.column.dataIndex === 'time'">
                <!-- <div v-html="utils.formatTime(scope.record.time)"></div> -->
                <n-time-format :time="scope.record.time"/>
            </template>
            <template v-if="scope.column.dataIndex == 'state'">
                <n-table-tag :state="scope.record.state"/>
            </template>
        </template>
    </n-table>
</n-card>

export default {
    setup() {
        const tableConfig = reactive({
          formState: {
                page: 1,
                limit: 10,
                total: 0
            },
            columns: [
                {
                    title: '用户信息',
                    dataIndex: 'user_info',
                    autoHeight: true,
                    minWidth: 180
                },
                {
                    title: '地址信息',
                    dataIndex: 'address_info',
                    minWidth: 180
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    width: 120
                },
                {
                    title: '状态',
                    dataIndex: 'state',
                    align: 'center',
                    width: 100
                },
          ],
          loading: false,
          dataSource: data: [
            { id: 1, age: 18, state: 1, headimgurl, num: 999, money: 100, nickname: '大象姐姐1', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 2, age: 18, state: 1, headimgurl, num: 9999, money: 106, nickname: '', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 3, age: 18, state: 0, headimgurl, num: 99999, money: 100.36, nickname: '大象姐姐3', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 4, age: 18, state: 1, headimgurl, num: 999999, money: 1000.99, nickname: '大象姐姐4', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 5, age: 18, state: 1, headimgurl, num: 9999999, money: 999, nickname: '大象姐姐5', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
          ],
          loading: false,
          pageChange: function (pagination) {
            tableConfig.formState.page = pagination.current
            tableConfig.formState.limit = pagination.pageSize
            tableConfig.getList()
          },
          })

        return {
            ...toRefs(tableConfig)
        }
    }
}

内容宽度

1. 宽度按最小宽度设置，来保证主体内容的可视化。包含：操作、时间、状态、类型、一张图片;
2. 确定长度的内容直接设置宽度width: 120，不确定长度的内容让他自适应即可minWidth: 180，像序号列宽度设为65，时间为120

Preview

查看代码

<n-card title="用户列表">
    <n-table :loading="loading" :columns="columns" :data-source="dataSource" :form-state="formState" :total="formState.total" @pageChange="pageChange">
        <template v-slot="{scope}">
            <template v-if="scope.column.dataIndex === 'user_info'">
                <n-table-user-info :record="scope.record" />
            </template>
            <template v-if="scope.column.dataIndex === 'address_info'">
                <n-table-address :record="scope.record" />
            </template>
            <template v-if="scope.column.dataIndex === 'time'">
                <!-- <div v-html="utils.formatTime(scope.record.time)"></div> -->
                <n-time-format :time="scope.record.time"/>
            </template>
            <template v-if="scope.column.dataIndex == 'state'">
                <n-table-tag :state="scope.record.state"/>
            </template>
        </template>
    </n-table>
</n-card>

export default {
    setup() {
        const tableConfig = reactive({
          formState: {
                page: 1,
                limit: 10,
                total: 0
            },
            columns: [
                {
                    title: '用户信息',
                    dataIndex: 'user_info',
                    autoHeight: true,
                    width: 180
                },
                {
                    title: '地址信息',
                    dataIndex: 'address_info',
                    minWidth: 180
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    width: 120
                }
          ],
          loading: false,
          dataSource: data: [
            { id: 1, age: 18, state: 1, headimgurl, num: 999, money: 100, nickname: '大象姐姐1', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 2, age: 18, state: 1, headimgurl, num: 9999, money: 106, nickname: '', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 3, age: 18, state: 0, headimgurl, num: 99999, money: 100.36, nickname: '大象姐姐3', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 4, age: 18, state: 1, headimgurl, num: 999999, money: 1000.99, nickname: '大象姐姐4', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 5, age: 18, state: 1, headimgurl, num: 9999999, money: 999, nickname: '大象姐姐5', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
          ],
          loading: false,
          pageChange: function (pagination) {
            tableConfig.formState.page = pagination.current
            tableConfig.formState.limit = pagination.pageSize
            tableConfig.getList()
          },
          })

        return {
            ...toRefs(tableConfig)
        }
    }
}

字符位置

1. 确定的内容比如序号、时间、状态等设置居中对齐即可；align: 'center'
2. 数字类型的比如秒，钱靠右对齐；align: 'right'
3. 字符串居左，例如：那些比较长的内容、页面路径、标题等内容设置左对齐；align: 'left'

Preview

查看代码

<n-card title="用户列表">
    <n-table :loading="loading" :columns="columns" :data-source="dataSource" :form-state="formState" :total="formState.total" @pageChange="pageChange">
        <template v-if="scope.column.dataIndex === 'address_info'">
            <n-table-address :record="scope.record" />
        </template>
        <template v-if="scope.column.dataIndex === 'time'">
            <!-- <div v-html="utils.formatTime(scope.record.time)"></div> -->
            <n-time-format :value="scope.record.time"/>
        </template>
        <template v-if="scope.column.dataIndex == 'state'">
            <n-table-tag :state="scope.record.state"/>
        </template>
        <template v-if="scope.column.dataIndex == 'num'">
            {{ utils.toThousands(scope.record.num) }}
        </template>
        <template v-if="scope.column.dataIndex == 'money'">
            {{ utils.formatCurrency(scope.record.money) }}
        </template>
    </n-table>
</n-card>

export default {
    setup() {
        const tableConfig = reactive({
          formState: {
                page: 1,
                limit: 10,
                total: 0
            },
            columns: [
                {
                    title: '地址信息',
                    dataIndex: 'address_info',
                    align: 'left', 
                    minWidth: 180
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    width: 120
                },
                {
                    title: '状态',
                    dataIndex: 'state',
                    align: 'center', 
                    width: 100
                },
                {
                    title: '人数',
                    key: 'num',
                    dataIndex: 'num',
                    align: 'right', 
                    width: 150
                },
                {
                    title: '金额',
                    key: 'money',
                    dataIndex: 'money',
                    align: 'right', 
                    width: 150
                },
          ],
          loading: false,
          dataSource: data: [
            { id: 1, age: 18, state: 1, headimgurl, num: 999, money: 100, nickname: '大象姐姐1', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 2, age: 18, state: 1, headimgurl, num: 9999, money: 106, nickname: '', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 3, age: 18, state: 0, headimgurl, num: 99999, money: 100.36, nickname: '大象姐姐3', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 4, age: 18, state: 1, headimgurl, num: 999999, money: 1000.99, nickname: '大象姐姐4', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 5, age: 18, state: 1, headimgurl, num: 9999999, money: 999, nickname: '大象姐姐5', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
          ],
          loading: false,
          pageChange: function (pagination) {
            tableConfig.formState.page = pagination.current
            tableConfig.formState.limit = pagination.pageSize
            tableConfig.getList()
          },
          })

        return {
            ...toRefs(tableConfig)
        }
    }
}

特殊字符

1. 数字必须带千分符；utils.toThousands(scope.record.num)
2. 金额必须是前缀为￥，保留两位小数的字符；utils.formatCurrency(scope.record.num)
3. 展示图片时要使用a-image，组件自带预览，width给80即可；<a-image :width="80" :src="record.headimgurl" />
4. 列表中的 button 操作按钮必须添加 icon，可用<n-button-group>包裹

Preview

查看代码

<n-card title="用户列表">
    <n-table :loading="loading" :columns="columns" :data-source="dataSource" :form-state="formState" :total="formState.total" @pageChange="pageChange">
        <template v-if="scope.column.dataIndex == 'num'">
            {{ utils.toThousands(scope.record.num) }}
        </template>
        <template v-if="scope.column.dataIndex == 'money'">
            {{ utils.formatCurrency(scope.record.money) }}
        </template>
        <template v-if="scope.column.dataIndex == 'headimgurl'">
            <a-image :width="80" :src="scope.record.headimgurl" />
        </template>
        <template v-if="scope.column.key === 'operation'">
            <n-button-group>
                <n-button type="edit" kind="link" @click="toEdit(scope.record)"></n-button>
                <n-button type="preview" kind="link" @click="toInfo(scope.record)"></n-button>
                <n-button type="delete" kind="link" @click="operaDel.isVisibleDel = true, operaDel.operate_id = scope.record.id"></n-button>
            </n-button-group>
        </template>
    </n-table>
</n-card>

export default {
    setup() {
        const tableConfig = reactive({
          formState: {
                page: 1,
                limit: 10,
                total: 0
            },
            columns: [
                {
                    title: '人数',
                    key: 'num',
                    dataIndex: 'num',
                    align: 'right',
                    width: 150
                },
                {
                    title: '金额',
                    key: 'money',
                    dataIndex: 'money',
                    align: 'right',
                    width: 150
                },
                {
                    title: '图片',
                    key: 'headimgurl',
                    dataIndex: 'headimgurl',
                    autoHeight: true,
                    width: 200
                },
                {
                    title: '操作',
                    key: 'operation',
                    fixed: 'right',
                    align: 'center',
                    autoHeight: true,
                    width: 200,
                },
          ],
          loading: false,
          dataSource: data: [
            { id: 1, age: 18, state: 1, headimgurl, num: 999, money: 100, nickname: '大象姐姐1', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 2, age: 18, state: 1, headimgurl, num: 9999, money: 106, nickname: '', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 3, age: 18, state: 0, headimgurl, num: 99999, money: 100.36, nickname: '大象姐姐3', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 4, age: 18, state: 1, headimgurl, num: 999999, money: 1000.99, nickname: '大象姐姐4', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 5, age: 18, state: 1, headimgurl, num: 9999999, money: 999, nickname: '大象姐姐5', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
          ],
          loading: false,
          pageChange: function (pagination) {
            tableConfig.formState.page = pagination.current
            tableConfig.formState.limit = pagination.pageSize
            tableConfig.getList()
          },
          })

        return {
            ...toRefs(tableConfig)
        }
    }
}

其他

1. 默认前四列固定左侧fixed: 'left'，如果不需要可手动设置fixed: 'none'；
2. 操作列当内容过多时漂浮在表格右侧；fixed: 'right'
3. 分页显示第几项到第几项，总共多少项 分页器有切换当前页和分页数量的功能

Preview

查看代码

<n-card title="用户列表">
    <n-table :loading="loading" :columns="columns" :data-source="dataSource" :form-state="formState" :total="formState.total" @pageChange="pageChange">
        <template v-if="scope.column.dataIndex === 'user_info'">
            <n-table-user-info :record="scope.record" />
        </template>
        <template v-if="scope.column.dataIndex === 'address_info'">
            <n-table-address :record="scope.record" />
        </template>
        <template v-if="scope.column.dataIndex === 'time'">
            <!-- <div v-html="utils.formatTime(scope.record.time)"></div> -->
            <n-time-format :value="scope.record.time"/>
        </template>
        <template v-if="scope.column.dataIndex == 'state'">
            <n-table-tag :state="scope.record.state"/>
        </template>
        <template v-if="scope.column.dataIndex == 'num'">
            {{ utils.toThousands(scope.record.num) }}
        </template>
        <template v-if="scope.column.dataIndex == 'money'">
            {{ utils.formatCurrency(scope.record.money) }}
        </template>
        <template v-if="scope.column.key === 'operation'">
            <n-button-group>
                <n-button type="edit" kind="link" @click="toEdit(scope.record)"></n-button>
                <n-button type="preview" kind="link" @click="toInfo(scope.record)"></n-button>
                <n-button type="delete" kind="link" @click="operaDel.isVisibleDel = true, operaDel.operate_id = scope.record.id"></n-button>
            </n-button-group>
        </template>
    </n-table>
</n-card>

export default {
    setup() {
        const tableConfig = reactive({
          formState: {
                page: 1,
                limit: 10,
                total: 0
            },
            columns: [
                {
                    title: '用户信息',
                    dataIndex: 'user_info',
                    autoHeight: true,
                    minWidth: 180
                },
                {
                    title: '地址信息',
                    dataIndex: 'address_info',
                    minWidth: 180
                },
                {
                    title: '时间',
                    dataIndex: 'time',
                    width: 120
                },
                {
                    title: '状态',
                    dataIndex: 'state',
                    align: 'center',
                    width: 100
                },
                {
                    title: '人数',
                    key: 'num',
                    dataIndex: 'num',
                    align: 'right',
                    width: 150
                },
                {
                    title: '金额',
                    key: 'money',
                    dataIndex: 'money',
                    align: 'right',
                    width: 150
                },
                {
                    title: '操作信息',
                    dataIndex: 'operator_info',
                    align: 'center',
                    autoHeight: true,
                    width: 200
                },
                {
                    title: '操作',
                    key: 'operation',
                    fixed: 'right', 
                    align: 'center',
                    autoHeight: true,
                    width: 200,
                },
          ],
          loading: false,
          dataSource: data: [
            { id: 1, age: 18, state: 1, headimgurl, num: 999, money: 100, nickname: '大象姐姐1', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 2, age: 18, state: 1, headimgurl, num: 9999, money: 106, nickname: '', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 3, age: 18, state: 0, headimgurl, num: 99999, money: 100.36, nickname: '大象姐姐3', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 4, age: 18, state: 1, headimgurl, num: 999999, money: 1000.99, nickname: '大象姐姐4', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
            { id: 5, age: 18, state: 1, headimgurl, num: 9999999, money: 999, nickname: '大象姐姐5', phone: '18720264255', time: '2024-04-11 18:31:31', province: '江西省', city: '南昌市', districts: '红谷滩区', address: '万达中心写字楼b3' },
          ],
          loading: false,
          pageChange: function (pagination) {
            tableConfig.formState.page = pagination.current
            tableConfig.formState.limit = pagination.pageSize
            tableConfig.getList()
          },
          })

        return {
            ...toRefs(tableConfig)
        }
    }
}

功能

1. loading必须要加，否则使用组件时数据会渲染不出来
2. 如果是单行单列，数据只占一行的话，column配置不需要加autoHeight：true，如果设置每一行高度会很高；当列内容为自定义时，比如用户信息（头像+昵称+手机号），必须设置 autoHeight: true，否则会出现列高度压缩问题
3. 删除这种功能必须进行二次确认才可以操作
4. 获取行内容直接使用插槽v-slot="{ scope }"

组件位置

项目根目录下的 /src/components/table/index.vue

注：组件基于antd-table的s-table进行的二次封装，支持大部分s-table的属性，如果有部分属性不生效，不要随意修改组件内部的内容，请联系作者进行处理

使用方法

1. 无需引入，已经注册为全局组件

2. 直接在页面的n-card > n-table 使用

3. props传参

   props	类型	默认值	备注
   rowKey	String	id	表格的key值，为绑定的数据源中的唯一值，一般为id，如需修改请传入对应的字段名
   loading	Boolean	false	使用方法：数据请求开始时，将loading置为true，请求结束拿到数据后，将loading置为false
   columns	Array	[]	表格绑定的列
   dataSource	Array	[]	数据源
   formState	Object	{ page:0, limit: 10 }	分页器的信息
   total	Number	0	数据总数
   showPagination	Boolean	true	是否展示分页器
   footer	Boolean	false	页脚，开启时可以使用名为footer的具名插槽在表格的页脚显示内容
   header	Boolean	false	是否开启个性化头部单元格
   expandConf	Object		嵌套子表格，当传入show：true时开启，其他配置：rowid（展开的子表格key），loading（子表格加载状态），columns（子表格列配置），dataSource（子表格数据源）
   selectedRowKeys	string[]	null	指定选中项的 key 数组，需要和 onSelect、onSelectAll 进行配合
   childrenColumnName	string	children	指定树形结构的列名
   checkStrictly	Boolean	true	checkable 状态下节点选择完全受控（父子数据选中状态不再关联）
   scroll	Object	{}	表格是否可滚动，也可以指定滚动区域的宽、高 { x: 0, y: 0 }
   showSortCol	Boolean	true	是否显示第一列排序列
   indentSize	Number	15	展示树形数据时，每层缩进的宽度，以 px 为单位
   selectType	String	checkbox	'checkbox'-多选 'radio'-单选

4. 事件

   事件名	返回值	备注
   pageChange	{ current: 1, pageSize: 10 }	分页改变事件
   expand	{expanded, record}	点击+展开触发的事件
   expandedRowsChange	Function(expandedRows)	展开的行变化时触发
   onSelectChange	{ selectedRowKeys, selectedRows }	手动选择/取消选择某列的回调

5. 注意事项

• 当列的内容为固定内容时，比如时间，操作人，状态等，宽度要固定，通常时间200，操作人85，状态65
• 操作列要固定在右侧，当屏幕宽度缩小时，可以横向滚动。fixed: 'right'
• 当列内容为自定义内容时，需要添加autoHeight: true，使整行的高度撑开

6. 删除必须添加二次确认弹窗 使用components/dialog组件 props：isVisible 是否显示 sTips 提示文字 事件：subTapBtn 返回一个对象 { value: true/false }表示点击了取消还是确定

子组件

效果展示：

Preview

1、TimeFormat

组件说明：年月日、时分秒换行显示

• 使用方法：直接在页面中使用，传入时间戳即可
• 代码示例：

<n-table-time-format :time="scope.record.updated_at"></n-table-time-format>

2、ButtonGrouop

组件说明：按钮换行，补分割线

• 使用方法：传入按钮列表
• 代码示例：

<n-button-group>
   <n-button type="edit" kind="link" @click="toEdit(scope.record)"></n-button>
   <n-button type="preview" kind="link" @click="toInfo(scope.record)">详情</n-button>
   <n-button type="delete" kind="link" @click="operaDel.isVisibleDel = true, operaDel.operate_id = scope.record.id"></n-button>
</n-button-group>

3、TableTag

组件说明：展示开启和关闭的标签

• 使用方法：已全局注册
• 代码示例：

<n-table-tag :state="scope.record.state"></n-table-tag>

4、TagView

组件说明：展示标签页面类型的标签

• 使用方法：传入整条数据
• 代码示例：

<tag-view :record="scope.record"></tag-view>