vue.js - 如何将操作按钮添加到数据表？

Question

我正在尝试为数据表中的每一行放置一个按钮，它将调用 methods 中声明的函数并执行某些操作

我有这个模板代码:

<template>
  <div class="table-responsive text-nowrap">
    <a-table :data-source="data" :columns="columns">
      <template
        #filterDropdown="{
          setSelectedKeys,
          selectedKeys,
          confirm,
          clearFilters,
          column,
        }"
      >
        <div style="padding: 8px">
          <a-input
            ref="searchInput"
            :placeholder="`Search ${column.dataIndex}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="handleSearch(selectedKeys, confirm, column.dataIndex)"
          />
          <a-button
            type="primary"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            <template #icon><SearchOutlined /></template>
            Search
          </a-button>
          <a-button size="small" style="width: 90px" @click="handleReset(clearFilters)">
            Reset
          </a-button>
        </div>
      </template>
      <template #filterIcon="filtered">
        <search-outlined :style="{ color: filtered ? '#108ee9' : undefined }" />
      </template>
      <template #customRender="{ text, column }">
        <span v-if="searchText && searchedColumn === column.dataIndex">
          <template
            v-for="(fragment, i) in text
              .toString()
              .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
          >
            <mark
              v-if="fragment.toLowerCase() === searchText.toLowerCase()"
              :key="i"
              class="highlight"
            >
              {{ fragment }}
            </mark>
            <template v-else>{{ fragment }}</template>
          </template>
        </span>
        <template v-else>
          {{ text }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import apiClient from '@/services/axios'
import store from 'store'
import { SearchOutlined } from '@ant-design/icons-vue'
import { defineComponent, reactive, ref, onMounted } from 'vue'

//const data = [];

export default defineComponent({
  components: {
    SearchOutlined,
  },
  setup() {    
    const data = ref([])


    async function getCards(){
        const response = await apiClient.get('/gift/list', { headers: { 'Authorization': 'Bearer' + store.get('token') }})
        data.value = response.data
    }

    onMounted(async function(){      
      setImmediate(await getCards())
      setInterval(async () => { 
        try{
          await getCards() 
        }catch(e){
          
        }        
        }, 60000) // fetch /gift/list every 1 minute
    })

    const state =  reactive({
      searchText: '',
      searchedColumn: '',
    })

    const searchInput = ref()

    const columns = [
      {
        title: 'Number',
        dataIndex: 'number',
        key: 'number',
        slots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'customRender',
        },
        onFilter: (value, record) =>
          record.number
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => {
              console.log(searchInput.value)
              searchInput.value.focus()
            }, 0)
          }
        },
      },
      {
        title: 'Month',
        dataIndex: 'month',
        key: 'month',
        slots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'customRender',
        },
        onFilter: (value, record) =>
          record.month
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => {
              searchInput.value.focus()
            })
          }
        },
      },
      {
        title: 'Year',
        dataIndex: 'year',
        key: 'year',
        slots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'customRender',
        },
        onFilter: (value, record) =>
          record.year
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => {
              searchInput.value.focus()
            })
          }
        },
      },
            {
        title: 'Price',
        dataIndex: 'price',
        key: 'price',
        slots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'customRender',
        },
        onFilter: (value, record) =>
          record.price
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => {
              searchInput.value.focus()
            })
          }
        },
      },

      {
        title: 'Company',
        dataIndex: 'company',
        key: 'company',
        slots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'customRender',
        },
        onFilter: (value, record) =>
          record.company
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => {
              searchInput.value.focus()
            })
          }
        },
      },

        {
        title: 'Seller',
        dataIndex: 'addedBy',
        key: 'addedBy',
        slots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'customRender',
        },
        onFilter: (value, record) =>
          record.addedBy
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible => {
          if (visible) {
            setTimeout(() => {
              searchInput.value.focus()
            })
          }
        },
      },
    ]

    const handleSearch = (selectedKeys, confirm, dataIndex) => {
      confirm()
      console.log(selectedKeys[0])
      state.searchText = selectedKeys[0]
      state.searchedColumn = dataIndex
    }

    const handleReset = clearFilters => {
      clearFilters()
      state.searchText = ''
    }

    return {
      data,
      columns,
      handleSearch,
      handleReset,
      searchText: '',
      searchInput: null,
      searchedColumn: '',
    }
  },
  methods: {
  },
})
</script>

注意:按钮必须调用函数，将其值属性的值作为参数传递，该值必须从变量 data 中提取，在本例中为 的值_id 属性。

Answer 1

Column API (对于 columns[] 中的数组元素)支持一个 customRender Prop ，它可以返回列的自定义呈现(即，一个 VNode 来自h)。您可以使用它来返回带有引用本地方法的 onClick 处理程序的按钮:

import { h } from 'vue'

export default {
  setup() {
    const onRowButtonClick = (record) => {
      alert(`${record.name} clicked`)
    }

    return {
      columns: [
        {
          customRender({ record, index }) {
            return h('button', {
              onClick: () => onRowButtonClick(record)
            }, 'click')
          }
        },
      ],
    };
  }
}

demo