Vue 使用JSX 写表格

最新推荐文章于 2024-11-29 10:43:37 发布

原创最新推荐文章于 2024-11-29 10:43:37 发布 · 631 阅读

CC 4.0 BY-SA版权

本文展示了如何在 Vue.js 中创建一个表格，包含日期、姓名和地址等列，并实现删除操作。通过定义数据、方法及使用 scoped slot 进行自定义操作列的渲染。

<!--
 * @Author: zhang_gen_yuan
 * @Date: 2021-05-20 22:54:04
 * @LastEditTime: 2021-06-07 23:24:12
 * @Descripttion: 
-->
<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>