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

效果图：

代码：

    <v-card style="margin: 24px;">
      <v-card-title>
        <v-text-field
          v-model="search"
          append-icon="mdi-magnify"
          label="Search"
          single-line
          hide-details
        ></v-text-field>
        <v-spacer></v-spacer>
        <v-btn
          text
          color="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>
              <td
                v-for="headerData in headerArr.filter(
                  (val, index, arr) => {
                    return index === 0;
                  }
                )"
                :key="headerData.value"
              >
                {{ props.index + 1 }}
              </td>
              <td
                v-for="headerData in headerArr.filter(
                  (val, index, arr) => {
                    return index === 1;
                  }
                )"
                :key="headerData.value"
              >
                {{ props.item[headerData.value] }}
              </td>
              <td
                v-for="headerData in headerArr.filter(
                  (val, index, arr) => {
                    return index !== 0 && index !== 1 && index !== 7 && index !== 8;
                   }
                )"
                :key="headerData.value"
              >
                <v-select
                  v-if="headerData.controlType==='v-select'"
                  v-model="props.item[headerData.value]"
                  :items="headerData.menu"
                  :label="headerData.text"
                  single-line
                  hide-details
                  style="padding-top: 0px; margin-top: 0px;"
                ></v-select>
                <v-text-field
                  v-else-if="headerData.controlType==='v-text-field'"
                  v-model="props.item[headerData.value]"
                  hide-details
                  autocomplete="off"
                  outlined
                  class="form-table"
                ></v-text-field>
                <v-switch
                  v-else-if="headerData.controlType==='v-switch'"
                  v-model="props.item[headerData.value]"
                  hide-details
                  style="margin: 0;padding: 0;width: 100%"
                ></v-switch>
              </td>
              <td
                v-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>
              <td
                v-for="headerData in headerArr.filter(
                  (val, index, arr) => {
                    return index === 8;
                  }
                )"
                :key="headerData.value"
              >
                <v-btn
                  color="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-btn
          text
          @click="editItems('ADD')"
          color="primary"
          style="position: absolute; left: 16px;"
        >ADD</v-btn>
        <v-btn
          text
          @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].bOn
        this.$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()
            break
          case 'DELETE':
            if (this.formField[index] === item) {
              this.formField.splice(index, 1)
            }
            break
          default:
            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>