hexing-table

editable table base on elementui

Usage no npm install needed!

<script type="module">
  import hexingTable from 'https://cdn.skypack.dev/hexing-table';
</script>

README

hx-table

Project setup

npm i hx-editable

how to use

add config in vue.config.js

runtimeCompiler: true,

example to use

    <hxTable :columnOption="columnOption" :data="data" @cellChanged="cellChanged">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </hxTable>

        data() {
        return {
          columnOption: [
            { id: "date", type: "date", format: "yyyy-MM-dd" },
            { id: "name", type: "text" },
            {
              id: "address",
              type: "select",
              options: [
                {
                  value: "黄金糕",
                  label: "黄金糕"
                },
                {
                  value: "双皮奶",
                  label: "双皮奶"
                },
                {
                  value: "蚵仔煎",
                  label: "蚵仔煎"
                }
              ]
            }
          ],

          data: [
            {
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄"
            },
            {
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄"
            },
            {
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄"
            }
          ]
        };
      },
      methods: {
        cellChanged(row, column, cell) {
          console.log("hahahha", this.data);
        }

Other

suggest mail to xujf0992@163.com