naive ui组件库table表格组件引入NDatePicker日期组件【vue3】

原创已于 2024-12-16 16:31:01 修改 · 277 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #vue #前端 #html5

于 2024-12-16 11:27:35 首次发布

效果如图所示：
在这里插入图片描述

代码如下：

1. html代码

<n-data-table
    :columns="xxxColumns"
    :data="xxxData"
    striped
    scroll-x
    max-height="350"
    style="margin-bottom: 14px"
    :bordered="false"
    :size="'small'"
/>

2. js代码

import {h, ref} from "vue";
// 引入表格组件和日期组件
import {NDataTable, NDatePicker} from "naive-ui";

// 表头
const xxxColumns = ref([
  {
    title: "序号",
    fixed: "left",
    key: "xh",
    width: 80,
    align: 'center',
    render: (_, index) => {
      return `${index + 1}`;
    },
  },
  {
    title: "测试",
    key: "cs",
    width: 280,
    align: 'center',
    ellipsis: {
      tooltip: true,
    },
    // 重要代码
    render(row,index) {
      return h(NDatePicker, {
        'formatted-value': row.cs,
        'value-format':"yyyy-MM-dd",
        onUpdateFormattedValue(v) {
          xxxData.value[index].sx = v;
        }
      });
    }
  },
])

const xxxData = ref([
	{cs:'2024-12-16'},
	{cs:'2024-12-03'}
])