Question

我想为我用v-for绑定的选择添加禁用选项。 operator <上的Vue文档建议添加一个，但是示例使用的是硬编码选项。

我想用v-绑定创建一个禁用的“请选择一个”，以强制用户选择一个选项，而不是默认使用某个特定选项。我目前在列表中添加了“请选择一个”选项，将选择项绑定到该选项，它可以正常显示，但我不希望用户再次选择它。

使用v-for绑定到select时如何实现？

from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *


class SortFilterProxyModel(QSortFilterProxyModel):
    def lessThan(self, left, right):
        leftData = self.sourceModel().data(left)
        rightData = self.sourceModel().data(right)
        return QTableWidgetItem(leftData) < QTableWidgetItem(rightData)

class GuilQTableView(QWidget):
    def __init__(self):
        super().__init__()
        self.init_ui()
        # filter
        self.line_search.textChanged.connect(self.filter)

    def init_ui(self):
        self.setWindowTitle("QTableView")

        self.table = QTableView()
        self.table.setSortingEnabled(True)
        self.h_header = self.table.horizontalHeader()
        self.model = QStandardItemModel()
        self.proxyFilter = SortFilterProxyModel()

        self.line_search = QLineEdit()
        lbl_search = QLabel("Letter Search")
        h_search = QHBoxLayout()
        h_search.addWidget(lbl_search)
        h_search.addWidget(self.line_search)

        v_box = QVBoxLayout()
        v_box.addLayout(h_search)
        v_box.addWidget(self.prepare_table(self.table, self.model, self.proxyFilter, self.h_header))
        self.setLayout(v_box)

        self.setMinimumHeight(750)
        self.setFixedWidth(self.width())

    def prepare_table(self, table, model, proxyFilter, h_header):
        letter_list = [ 'A','B','C','Ç','G','Ğ','I','I','O','Ö','P','S','Ş','U','Ü','Y','Z',
                           'a','b','c','ç','g','ğ','ı','i','o','ö','p','s','ş','u','ü','y','z' ]

        model.setColumnCount(1)
        model.setRowCount(len(letter_list))
        model.setHorizontalHeaderLabels(['Letter'])

        for row, letter in enumerate(letter_list):
            model.setItem(row, 0, QStandardItem(letter))

        proxyFilter.setSourceModel(model)
        proxyFilter.setFilterKeyColumn(0)
        proxyFilter.setSortCaseSensitivity(Qt.CaseSensitive)

        table.setModel(proxyFilter)
        table.setAlternatingRowColors(True)
        table.setSelectionBehavior(QAbstractItemView.SelectRows)
        table.setSelectionMode(QAbstractItemView.ExtendedSelection)

        h_header.setSectionResizeMode(QHeaderView.Stretch)

        return table

    def filter(self, text):
        regExp = QRegExp(text, Qt.CaseInsensitive, QRegExp.Wildcard)
        self.proxyFilter.setFilterRegExp(regExp)


if __name__ == '__main__':
    import sys

    app = QApplication(sys.argv)
    w = GuilQTableView()

    w.show()
    sys.exit(app.exec_())

Answer 1

首先放置您的禁用选项，然后执行v-for。

<select id="dashboardSelectNew" v-model="formVariables.dashboardDefinition" @change="getDashboard">
  <option disabled value="">Please select one</option>
  <option v-for="dd in dashboardDefinitionList" :key="dd.id" :value="dd">
    {{ dd.Name }}
  </option>
</select>

请注意，我也曾尝试清理您的模型/值绑定，但是您可能不需要或不需要它。

对于初始值，您可以将其设置为列表中的实际条目，而不是特定的索引，例如

this.formVariables.dashboardDefinition = this.dashboardDefinitionList[someIndex]

使用Vue.js v-for填充选择时如何添加禁用的选项

1 个答案: