vuetify：v-data-table自定义列显示的内容及搜索功能

效果图：

代码：

    <v-card style="margin: 24px;"><v-card-title><v-text-fieldv-model="search"append-icon="mdi-magnify"label="Search"single-linehide-details></v-text-field><v-spacer></v-spacer><v-btntextcolor="primary">TABLE</v-btn></v-card-title><v-card-text><v-data-table:headers="headerArr":items="formField":search="search"><template v-slot:item="props"><tr><tdv-for="headerData in headerArr.filter((val, index, arr) => {return index === 0;})":key="headerData.value">{
   { props.index + 1 }}</td><tdv-for="headerData in headerArr.filter((val, index, arr) => {return index === 1;})":key="headerData.value">{
   { props.item[headerData.value] }}</td><tdv-for="headerData in headerArr.filter((val, index, arr) => {return index !== 0 && index !== 1 && index !== 7 && index !== 8;})":key="headerData.value"><v-selectv-if="headerData.controlType==='v-select'"v-model="props.item[headerData.value]":items="headerData.menu":label="headerData.text"single-linehide-detailsstyle="padding-top: 0px; margin-top: 0px;"></v-select><v-text-fieldv-else-if="headerData.controlType==='v-text-field'"v-model="props.item[headerData.value]"hide-detailsautocomplete="off"outlinedclass="form-table"></v-text-field><v-switchv-else-if="headerData.controlType==='v-switch'"v-model="props.item[headerData.value]"hide-detailsstyle="margin: 0;padding: 0;width: 100%"></v-switch></td><tdv-for="headerData in headerArr.filter((val, index, arr) => {return index === 7;})":key="headerData.value"><v-btn color="primary" icon @click="editItems('DELETE', props.item, props.index)"><v-icon>delete</v-icon></v-btn></td><tdv-for="headerData in headerArr.filter((val, index, arr) => {return index === 8;})":key="headerData.value"><v-btncolor="primary"small@click="gotoDetail(props.item)">Detail</v-btn></td></tr></template></v-data-table></v-card-text><v-card-actions style="position: relative; height: 56px;"><v-btntext@click="editItems('ADD')"color="primary"style="position: absolute; left: 16px;">ADD</v-btn><v-btntext@click="saveItem"color="primary"style="position: absolute; right: 16px;">SAVE</v-btn></v-card-actions></v-card>

    data: () => ({headerArr: [{ text: '#', sortable: false },{ text: 'Field Key', value: 'fieldKey', sortable: false, controlType: 'text' },{ text: 'Field Label', value: 'fieldLabel', sortable: false, controlType: 'v-text-field' },{ text: 'Description', value: 'description', sortable: false, controlType: 'v-text-field' },{ text: 'Data Type', value: 'dataType', sortable: false, controlType: 'v-select', menu: [{ value: 0, text: 'Number' }, { value: 1, text: 'String' }, { value: 2, text: 'Date' }, { value: 3, text: 'Date Time' }, { value: 4, text: 'Time' }, { value: 5, text: 'Boolean' }] },{ text: 'Control Type', value: 'controlType', sortable: false, controlType: 'v-select', menu: [{ value: 0, text: 'Text Area' }, { value: 1, text: 'Text Box' }, { value: 2, text: 'Check Box' }, { value: 3, text: 'Radio Box' }, { value: 4, text: 'Com Box' }, { value: 5, text: 'Date Picker' }, { value: 6, text: 'Time Picker' }] },{ text: 'Status', value: 'status', sortable: false, controlType: 'v-switch' },{ text: 'Operate', sortable: false },{ text: 'Action', sortable: false }],formField: [{ fieldLabel: '11111', fieldKey: 'test1', description: 'dgbfuocgbdvhcbjkdf', dataType: 0, controlType: 0, status: 1 },{ fieldLabel: '22222', fieldKey: 'test2', description: 'fcbdsoufhcnpoasxhn', dataType: 0, controlType: 1, status: 0 },{ fieldLabel: '33333', fieldKey: 'test3', description: 'djpaohsfncolfnbvcj', dataType: 1, controlType: 0, status: 1 },{ fieldLabel: '44444', fieldKey: 'test4', description: 'feopjfgprjnbgjbnhy', dataType: 1, controlType: 1, status: 0 },{ fieldLabel: '55555', fieldKey: 'test5', description: 'ghfiphsndgjfnbjfgn', dataType: 2, controlType: 1, status: 1 }],search: ''}),methods: {clickItem (index) {const temp = this.tabs[index]temp.bOn = !this.tabs[index].bOnthis.$set(this.tabs, index, temp)},gotoDetail (data) {console.log(data)},editItems (action, item, index) {switch (action) {case 'ADD':this.formField.push({ fieldLabel: '', fieldKey: 'test', description: '', dataType: 0, controlType: 0, status: 1 })this.$forceUpdate()breakcase 'DELETE':if (this.formField[index] === item) {this.formField.splice(index, 1)}breakdefault:break}},saveItem () {console.log(this.formField)}}

<style>
.form-table.v-text-field--outlined > .v-input__control > .v-input__slot {align-items: stretch;min-height: 32px;margin-top: 2px;
}
</style>