vue2中,vue-easytable组件的使用(二)——实现单元格可编辑功能
官网示例地址——https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/cell-edit
第一步:安包
npm i vue-easytable
第二步:引入包文件
src/main.js
import "vue-easytable/libs/theme-default/index.css";
import VueEasytable from "vue-easytable";
Vue.use(VueEasytable);
第三步:文件中进行使用
src/views/table.vue
<template>
<div>
<ve-table
rowKeyFieldName="rowKey"
:fixed-header="true"
:columns="columns"
:table-data="tableData"
:editOption="editOption"
:rowStyleOption="rowStyleOption"
border-y
/>
</div>
</template>
<script>
export default {
data() {
return {
rowStyleOption: {
clickHighlight: false,
},
// edit option 可控单元格编辑
editOption: {
// cell value change
cellValueChange: ({ row, column }) => {
console.log("cellValueChange row::", row);
console.log("cellValueChange column::", column);
},
},
columns: [
{
field: "",
key: "a",
title: "",
width: 50,
align: "center",
renderBodyCell: ({ row, column, rowIndex }, h) => {
return ++rowIndex;
},
},
{
field: "name",
key: "name",
title: "Name",
align: "left",
width: "15%",
edit: true,
},
{
field: "date",
key: "date",
title: "Date",
align: "left",
width: "15%",
edit: true,
},
{
field: "number",
key: "number",
title: "Number",
align: "right",
width: "30%",
edit: true,
},
{
field: "address",
key: "address",
title: "Address",
align: "left",
width: "40%",
edit: true,
},
],
// table data
tableData: [
{
name: "李世民",
date: "1900-05-14",
number: "32",
address: "Shanghai",
rowKey: 0,
},
{
name: "朱元璋",
date: "1910-06-15",
number: "145",
address: "Beijing",
rowKey: 1,
},
{
name: "刘邦",
date: "2000-07-16",
number: "276",
address: "Chongqing",
rowKey: 2,
},
{
name: "铁木真",
date: "2010-08-17",
number: "397",
address: "Xiamen",
rowKey: 3,
},
{
name: "康熙",
date: "2020-09-18",
number: "478",
address: "Shenzhen",
rowKey: 4,
},
],
};
},
};
</script>
效果-单元格可编辑