Naive-UI组件库中常用组件的属性（vue3+ts）_navie-ui 隐藏域

1.DataTable 常用属性  （数据表）

maxHeight={maxH} 表格内容的最大高度，可以是 CSS 属性值

scrollX={800} 表格内容的横向宽度，如果列被水平固定了，则需要设定它

columns={columnsRef.value} 需要展示的列

remote 表格是否自动分页数据，在异步的状况下你可能需要把它设为 true

data={tableDataRef.value} 需要展示的数据

pagination={pagination} 需要展示的分页数据

singleLine={false} 是否不设定列的分割线，当参数值为 true 时，则单元格没有右边线

onUpdateSorter={handleTableSorterChange} 如果变动列为多列排序则返回

2.DataTableColumns 常用属性  （数据表的列）

title: '序号', 列的 title 信息，可以是渲染函数

key: 'index', 这一列的 key，不可重复

width: 60, 列的宽度（在列固定时是必需的，并且需要为 number 类型）

align: 'center' 列内的文本排列

render: (row) => ( render 函数渲染 ，渲染这一列的每一行的单元格

<>

<NButton class="mr-16px" text textColor="#4f7afd" strong size="medium" type="primary" onClick={() => { viewDetail(row.formDataId) }} >

查看

</NButton>

3. pagination 常用属性 （页码）

const pagination = reactive({

page: 1, 受控模式下的当前页

pageSize: 10, 受控模式下的分页大小（每一页的数据大小）

showSizePicker: true, 是否显示每页条数的选择器

pageSizes: [10, 20, 50], 每页条数， 可自定义

itemCount: 0, 总条数

onChange: (page: number) => {

pagination.page = page

queryTableData()

},

onPageSizeChange: (pageSize: number) => {

pagination.pageSize = pageSize

pagination.page = 1

queryTableData()

},

prefix: () => 共{pagination.itemCount}条数据              // 分页前缀

})

4. Form表单常用属性

ref={formRef}   // ref找到这个表单Form

rules={formRules}  //  验证表项的规则

model={formModel.value}   // 获取表项中收集到的值的对象

labelAlign="right"    //  标签的文本对齐方式

labelPlacement="left"  //  标签显示的位置

labelWidth={210}   // 标签的宽度，在 label-placement 是 'left' 的时候可能会有用，'auto' 意味着 label width 会被自动调整

>