Как добавить событие при клике на муравье vue заголовок столбца таблицы? - PullRequest
Новая
       5

Как добавить событие при клике на муравье vue заголовок столбца таблицы?

2 голосов
/ 12 января 2020 
const columns = [
  { title: 'Name', dataIndex: 'name', width: 300 
    onHeaderCell: column => {
      return {
        onClick: e => {
          this.customize(e);
        },
      };
    },},
  { title: 'Employee ID', dataIndex: 'displayId', width: 150 },
  { title: 'Normal', dataIndex: 'normal.name', width: 100 },
  { title: 'Overtime', dataIndex: 'overtime.name', width: 100 },
  { title: 'Holiday', dataIndex: 'holiday.name', width: 100 },
  { title: 'Rest Day', dataIndex: 'restDay.name', width: 100 },
];

У меня есть таблица ant design vue, и я хочу добавить событие по щелчку, чтобы изменить название заголовка. Но я не могу добавить событие клика и настроить заголовок столбца.

Есть ли способ сделать это, когда щелчок заголовка столбца вызовет функцию?

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Я предполагаю, что вы используете этот Ant Design Vue и этот Таблица компонент.

Вы можете использовать пользовательский заголовок, указав column.slots.title: 

const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: {
      title: 'customTitle'
    }
  }
]

И укажите свой слот customTitle: 

<span slot='customTitle'>
  <div @click='editTitle'>{{ title }}</div>
</span>

Пример

0 голосов
/ 13 января 2020

Вы можете добавить параметр для каждого элемента, например «isClickable», и поместить прослушиватель щелчков для каждого элемента v-for, который будет входить в метод, который проверяет, можно ли щелкнуть по элементу. 

<template>
    <div>
        <div
            v-for="column in columns"
            @click="clickOnColumn(column)"
        />
    </div>
</template>

<script>
export default {
    data: () => ({
        columns: [
            {
                title: 'Name',
                dataIndex: 'name',
                width: 300,
                isClickable: true,
            },
            { title: 'Employee ID', dataIndex: 'displayId', width: 150 },
            { title: 'Normal', dataIndex: 'normal.name', width: 100 },
            { title: 'Overtime', dataIndex: 'overtime.name', width: 100 },
            { title: 'Holiday', dataIndex: 'holiday.name', width: 100 },
            { title: 'Rest Day', dataIndex: 'restDay.name', width: 100 },
        ],
    }),

    methods: {
        clickOnColumn(column) {
            if (column.isClickable) {
                // Execute code
            } else {
                return null
            }
        },
    },

}
</script>

<style lang="scss" scoped>

</style>
...