JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.com/vue-easytable/libs/theme-default/index.css"
/>
</head>
<body>
<div id="app">
<ve-table
:columns="columns"
:table-data="tableData"
row-key-field-name="rowKey"
:edit-option="editOption"
></ve-table>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/vue-easytable/libs/umd/index.js"></script>
<script>
new Vue({
el: "#app",
data: function () {
return {
editOption: {
// cell value change
cellValueChange: ({ row, column }) => {
console.log("cellValueChange row::", row);
console.log("cellValueChange column::", column);
},
},
columns: [
{
field: "date",
key: "b",
title: "Date",
width: 200,
align: "center",
edit: true,
},
{
field: "hobby",
key: "c",
title: "Hobby",
width: 300,
align: "left",
edit: true,
},
{
field: "address",
key: "d",
title: "Address",
width: "",
...