Vue 使用JSX 写表格

小鱼儿 2022-10-05 06:59 144阅读 0赞

<script>
    export default {
      data() {
        return {
          tableData: [
            {
              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: {
        del(row) {
          console.log(row);
        },
      },
      render() {
        return (
          <div>
            <el-table data={this.tableData} style="width: 100%">
              <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>
              <el-table-column
                label="操作"
                {...{
                  scopedSlots: {
                    default: (scope) => {
                      return (
                        <el-button onClick={() => this.del(scope.row)}>
                          删除
                        </el-button>
                      );
                    },
                  },
                }}
              ></el-table-column>
            </el-table>
          </div>
        );
      },
    };
    </script>