Vue中在data裡面呼叫method方法的實現

2022-06-06 10:00:54

今天我用到了Element的一個元件

如下：

其元件的程式碼如下

// template內容：
<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

// data資料內容
 tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀區金沙江路 1519 弄",
          children: [
            {
              id: 21,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀區金沙江路 1519 弄",
            },
          ],
        },
      ],

如果想要在表格中加入一個按鈕，是可以加進去的（Element的表格元件是可以加入元素標籤的，直接寫在空所對應的表格裡面即可），程式碼如下：

// 要改變data裡面的內容即可
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
     <el-button type="primary" plain>確認</el-button>
     ),
  }]
}

頁面渲染的效果如下

注意，這個地方如果你想給裡面的按鈕新增事件的話，不能夠直接在按鈕裡面加 @click 或者 onclick ，這樣新增按鈕事件，會產生錯誤，效果如下：

// 先是新增@click的方法
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
    <el-button type="primary" plain @click="showMe()">確認</el-button>
    ),
  }],
}

1、如果用@click的方法，在程式碼塊裡面就會顯示錯誤資訊：

2、如果使用onclick方法，程式碼塊不會報錯，在頁面渲染的控制檯會顯示錯誤：

// 使用的onclick方法如下：
{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區金沙江路 1519 弄",
  children: [{
    id: 21,
    date: "2016-05-01",
    name: "王小虎",
    address: (
    <el-button type="primary" plain onclick="showMe">確認</el-button>
    ),
  }]
}

效果如下：

如果想要在表格裡面新增按鈕事件的話

程式碼如下：

{
  id: 2,
  date: "2016-05-01",
  name: "王小虎",
  address: "上海市普陀區金沙江路 1519 弄",
  children: [{
     id: 21,
     date: "2016-05-01",
     name: "王小虎",
     address: (
        <el-button type="primary" plain onclick={() => this.showMe()}>確認</el-button>
      ),
  }]
}

這種在data資料裡面新增 οnclick={() => this.函數名()} 是不會出現錯誤的

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

Vue中在data裡面呼叫method方法的實現

目錄

今天我用到了Element的一個元件

其元件的程式碼如下

頁面渲染的效果如下

如果想要在表格裡面新增按鈕事件的話

熱門文章