vuereact-combined icon indicating copy to clipboard operation
vuereact-combined copied to clipboard

el-table不展示数据

Open edroplet opened this issue 1 year ago • 1 comments
trafficstars

import React from 'react' import { DatePicker, Card, Table, TableColumn } from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import { DatePicker as ReactDatePick } from "antd" import "antd/dist/antd.css" import moment from 'moment' import { applyVueInReact } from 'vuereact-combined' const VueDatePick = applyVueInReact(DatePicker) const VueCard = applyVueInReact(Card) const VueTable = applyVueInReact(Table) const VueTableCloumn = applyVueInReact(TableColumn)

// const dateFormat = moment(new Date()) class demo1 extends React.Component{ constructor (props) { super(props) this.state = { value1: new Date(), } this.onChange = this.onChange.bind(this) } onChange (val) { let date if (!val) { date = val } else { date = val.toDate() } this.setState({ value1: date }) } tableData () { return [ { id: 1, title: 'VueTable组件1', } ] } render(){ return ( <div className="react-com">

React 组件

{this.state.value1 && this.state.value1.toString()}

<div className="vue-com"> vue element-ui的datePicker <VueDatePick // 实现vue的v-model $model={{ value: this.state.value1, setter: (val) => { this.setState({value1:val}) } }} align="right" type="date" placeholder="选择日期"/> <div className="vue-com"> <VueTable data="{ }" > <VueTableCloumn label="ID" prop="id" width="120" /> <VueTableCloumn label="标题" prop="title" width="120" /> </VueTable> <div className="vue-com"> vue element-ui的Card <VueCard class="aaa" $slots={{ header: ( <div className="clearfix"> vue的卡片 ) }}> <div className="react-com"> 在element-ui的Card中应用react antd的DatePick
<ReactDatePick onChange={this.onChange} value={this.state.value1 && moment(this.state.value1)}/> <div className="vue-com"> vue element-ui的datePicker <VueDatePick // 实现vue的v-model $model={{ value: this.state.value1, setter: (val) => { this.setState({value1:val}) } }} align="right" type="date" placeholder="选择日期"/> </VueCard> ) } } export default demo1

edroplet avatar Mar 16 '24 15:03 edroplet

image

edroplet avatar Mar 16 '24 15:03 edroplet