82 lines
1.6 KiB
HTML
82 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Omiu</title>
|
|
<script type="module" src="/src/index.tsx"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>HTML Mode <a href="./demo.html">JSX Mode</a></h1>
|
|
<div>
|
|
<o-table id="myTable"></o-table>
|
|
</div>
|
|
|
|
<script>
|
|
const table = document.querySelector('#myTable')
|
|
table.props.checkbox = true
|
|
table.props.border = true
|
|
table.props.dataSource = [{
|
|
id: 1,
|
|
name: 'xwang',
|
|
age: 18,
|
|
address: 'Tencent'
|
|
}, {
|
|
id: 2,
|
|
name: 'dntzhang',
|
|
age: 12,
|
|
address: 'Tencent'
|
|
}, {
|
|
id: 3,
|
|
name: 'lucy',
|
|
age: 12,
|
|
address: 'Tencent'
|
|
}, {
|
|
id: 4,
|
|
name: 'john',
|
|
age: 12,
|
|
address: 'Tencent'
|
|
}, {
|
|
id: 5,
|
|
name: 'tim',
|
|
age: 12,
|
|
address: 'Tencent'
|
|
}]
|
|
|
|
table.props.columns = [{
|
|
title: 'ID',
|
|
render: item => (
|
|
Omi.h('strong', null, Omi.h(
|
|
'i', null, item.id
|
|
))
|
|
),
|
|
}, {
|
|
title: 'Name',
|
|
key: 'name',
|
|
}, {
|
|
title: 'Age',
|
|
key: 'age',
|
|
}, {
|
|
title: 'Address',
|
|
key: 'address',
|
|
}, {
|
|
title: '操作',
|
|
render: item => (
|
|
Omi.html`<span>
|
|
<a href="javascript:;" onClick=${e => {
|
|
table.props.dataSource.splice(table.props.dataSource.indexOf(item), 1)
|
|
table.update()
|
|
}}>Delete</a>
|
|
</span>`
|
|
)
|
|
}]
|
|
|
|
table.update()
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|