vue3 Element Plus 表格使用， vue-admin-beautiful表格使用。Element UI Plus弹窗更新，el-pagination分页，表格上面按钮搜索框,搜索框放在一行加入选择框等。Vue模板

电脑版发表于：2021/10/6 15:39

**最最简单的表格**
```
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
```
**带一点js的**
```
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" prop="date"  width="180" />
    <el-table-column label="Name" prop="name"  width="180" />
    <el-table-column label="Address" prop="address"  />
  </el-table>
</template>

<script>

export default defineComponent({
    name: 'dynamicTable',
    setup() {
      const state = reactive({
        tableData: [
                    {
                      date: '2016-05-03',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                      date: '2016-05-02',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                      date: '2016-05-04',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                    {
                      date: '2016-05-01',
                      name: 'Tom',
                      address: 'No. 189, Grove St, Los Angeles',
                    },
                  ]
      })

      onMounted(() => {
      })

      return {
        ...toRefs(state)
      }
    },
  })
</script>
```
**从后台读取的**
```
<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Id" prop="id"  width="180" />
    <el-table-column label="宗地位置" prop="landName"  width="180" />
    <el-table-column label="地块位置" prop="areaposition"  />
  </el-table>
</template>

<script>

import { getList } from '@/api/landInfo'

export default defineComponent({
    name: 'dynamicTable',
    setup() {
      const state = reactive({
        tableData: []
      })

      const fetchData = async () => {
        const result = await getList()
        state.tableData = result.data
      }
      const queryData = () => {
        fetchData()
      }
      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        queryData,
      }
    },
  })
</script>
```
**表格增加一个固定的编辑列，与弹窗的方式编辑**
![](https://img.tnblog.net/arcimg/aojiancc2/2a976f25e7d54894a3b38c25248aa1c3.png)

增加一个编辑组件，这里只贴了4个输入框，要多少个自己加就行了。
```
<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="700px"
    @close="close"
  >
    <el-form
      ref="formRef"
      :inline="true"
      label-width="80px"
      :model="form"
      :rules="rules"
      class="demo-form-inline"
    >
      <el-form-item label="宗地位置" prop="landName">
        <el-input v-model.trim="form.landName" />
      </el-form-item>
      <el-form-item label="地块位置" prop="areaposition">
        <el-input v-model.trim="form.areaposition" />
      </el-form-item>
      <el-form-item label="控规编号" prop="kgnumber">
        <el-input v-model.trim="form.kgnumber" />
      </el-form-item>
      <el-form-item label="土地面积" prop="landarea">
        <el-input v-model.trim="form.landarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { doEdit } from '@/api/table'

export default defineComponent({
  name: 'TableEdit',
  emits: ['fetch-data'],
  setup(props, { emit }) {
    const $baseMessage = inject('$baseMessage')

    const state = reactive({
      formRef: null,
      form: {
        title: '',
        author: '',
      },
      rules: {
        title: [{ required: true, trigger: 'blur', message: '请输入宗地位置' }],
        author: [
          { required: true, trigger: 'blur', message: '请输入地块位置' },
        ],
      },
      title: '',
      dialogFormVisible: false,
    })

    const showEdit = (row) => {
      if (!row) {
        state.title = '添加'
      } else {
        state.title = '编辑'
        state.form = JSON.parse(JSON.stringify(row))
      }
      state.dialogFormVisible = true
    }
    const close = () => {
      state['formRef'].resetFields()
      state.form = {
        title: '',
        author: '',
      }
      state.dialogFormVisible = false
    }
    const save = () => {
      state['formRef'].validate(async (valid) => {
        if (valid) {
          const { msg } = await doEdit(state.form)
          $baseMessage(msg, 'success', 'vab-hey-message-success')
          emit('fetch-data')
          close()
        }
      })
    }

    return {
      ...toRefs(state),
      showEdit,
      close,
      save,
    }
  },
})
</script>
```
表格页面：
```
<template>
  <el-table :data="tableData">
    <el-table-column label="Id" prop="id" width="60" />
    <el-table-column label="宗地位置" prop="landName" />
    <el-table-column label="地块位置" prop="areaposition" />
    <el-table-column label="控规编号" prop="kgnumber" />
    <el-table-column label="供应方式" prop="provideType" />
    <el-table-column label="土地面积" prop="landarea" />
    <el-table-column
      align="center"
      fixed="right"
      label="操作"
      show-overflow-tooltip
      width="200"
    >
      <template #default="{ row }">
        <el-button text type="primary" @click="handleDetail(row)">
          详情
        </el-button>
        <el-button text type="primary" @click="handleEdit(row)">编辑</el-button>
        <el-button text type="primary" @click="handleDelete(row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
</template>

<script>
import { getList } from '@/api/landInfo'

export default defineComponent({
  name: 'dynamicTable',
  components: {
    LandInfoEdit: defineAsyncComponent(() =>
      import('./components/LandInfoEdit')
    ),
  },
  setup() {
    const state = reactive({
      editRef: null,
      tableData: [],
    })

    const fetchData = async () => {
      const result = await getList()
      state.tableData = result.data
    }
    const queryData = () => {
      fetchData()
    }
    const handleEdit = (row) => {
      state['editRef'].showEdit(row)
    }
    onMounted(() => {
      fetchData()
    })

    return {
      ...toRefs(state),
      queryData,
      handleEdit,
    }
  },
})
</script>
```
**增加分页**
其实就是el-pagination控件的使用而已
```
<template>
  <div>
    <el-table :data="tableData" stripe="true" size="small" border="true">
      <el-table-column label="Id" prop="id" width="60" />
      <el-table-column label="宗地位置" prop="landName" />
      <el-table-column label="地块位置" prop="areaposition" />
      <el-table-column label="控规编号" prop="kgnumber" />
      <el-table-column label="供应方式" prop="provideType" />
      <el-table-column label="土地面积" prop="landarea" />
      <el-table-column label="平均容积率'" prop="floorarearatio" />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="200"
      >
        <template #default="{ row }">
          <el-button text type="primary" @click="handleDetail(row)">
            详情
          </el-button>
          <el-button text type="primary" @click="handleEdit(row)">
            编辑
          </el-button>
          <el-button text type="primary" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { getList } from '@/api/landInfo'

export default defineComponent({
  name: 'dynamicTable',
  components: {
    LandInfoEdit: defineAsyncComponent(() =>
      import('./components/LandInfoEdit')
    ),
  },
  setup() {
    const state = reactive({
      editRef: null,
      tableData: [],
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      queryForm: {
        pageNo: 1,
        pageSize: 3,
        title: '',
      },
    })

    const fetchData = async () => {
      // const result = await getList()
      // state.tableData = result.data

      const {
        data: { list, total },
      } = await getList(state.queryForm)

      state.tableData = list
      state.total = total
    }
    const handleSizeChange = (val) => {
      state.queryForm.pageSize = val
      fetchData()
    }
    const handleCurrentChange = (val) => {
      state.queryForm.pageNo = val
      fetchData()
    }
    const queryData = () => {
      fetchData()
    }
    const handleEdit = (row) => {
      state['editRef'].showEdit(row)
    }
    onMounted(() => {
      fetchData()
    })

    return {
      ...toRefs(state),
      queryData,
      handleEdit,
      fetchData,
      handleSizeChange,
      handleCurrentChange,
    }
  },
})
</script>
```
接口返回数据的格式如下：
```
{
  "code": 200, //成功的状态码
  "msg": "success", //提示信息
  "data": { //返回数据
      "list": [{}，{}，{}], //返回数组
      "total": 238, //总条数（表格中用到，其它接口可以不返回）
  }
}
```
**表格上面按钮搜索框等**
![](https://img.tnblog.net/arcimg/aojiancc2/1ceb240d03c1445ea6e05fc29ffdf220.png)

也很简单代码如下：
```
<vab-query-form>
  <vab-query-form-left-panel>
    <el-form inline label-width="0" :model="queryForm" @submit.prevent>
      <el-form-item>
        <el-input v-model="queryForm.name" placeholder="文件名称" />
      </el-form-item>
      <el-form-item>
        <el-button
          :icon="Search"
          native-type="submit"
          type="primary"
          @click="queryData"
        >
          查询
        </el-button>
        <el-button :icon="Plus" type="success" @click="handleAdd">
          上传
        </el-button>
        <el-button
          :icon="Delete"
          type="danger"
          @click="handleDelete($event)"
        >
          删除
        </el-button>
      </el-form-item>
    </el-form>
  </vab-query-form-left-panel>
  <vab-query-form-right-panel>
    <el-button
      style="margin: 0 10px 10px 0 !important"
      text
      type="primary"
      @click="clickFullScreen"
    >
      <vab-icon
        :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'"
      />
    </el-button>
    <el-popover popper-class="custom-table-checkbox" trigger="hover">
      <template #reference>
        <el-button
          style="margin: 0 0 10px 0 !important"
          text
          type="primary"
        >
          <vab-icon icon="settings-line" />
        </el-button>
      </template>
      <el-checkbox-group v-model="checkList">
        <vab-draggable
          v-bind="dragOptions"
          item-key="{ element }"
          :list="columns"
        >
          <template #item="{ element }">
            <div>
              <vab-icon icon="drag-drop-line" />
              <el-checkbox
                :disabled="element.disableCheck === true"
                :label="element.label"
              >
                {{ element.label }}
              </el-checkbox>
            </div>
          </template>
        </vab-draggable>
      </el-checkbox-group>
    </el-popover>
  </vab-query-form-right-panel>
</vab-query-form>
```
注意按钮的图标需要引入一下
```
import { Delete, Plus, Search, Setting } from '@element-plus/icons-vue'
```
图标需要暴露出去
```
    return {
      ...toRefs(state),
      queryData,
      handleEdit,
      fetchData,
      handleSizeChange,
      handleCurrentChange,
	  //暴露图标
      Plus,
      Delete,
      Search,
      Setting,
    }
```
**搜索框放在一行，加入选择框**
![](https://img.tnblog.net/arcimg/aojiancc2/7c4323f486584e6fa0bd8046b455f7ae.png)

```
<template>
  <div ref="containerRef" class="custom-table-container">
    <vab-upload ref="vabUploadRef" :limit="50" name="file" :size="2" :url="uploadUrl" @fetch-data="fetchData" />
    <vab-query-form>
      <vab-query-form-panel>
        <el-form inline label-width="0" :model="queryForm" @submit.prevent>
          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="文件名称" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="value" style="margin-left:6px" placeholder="所属部门">
              <el-option v-for="item in departments" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-select v-model="value" style="margin-left:6px" placeholder="文件类型">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button :icon="Search" native-type="submit" type="primary" @click="queryData">
              查询
            </el-button>
            <el-button :icon="Plus" type="success" @click="handleShow()">
              上传
            </el-button>
            <el-button type="danger" @click="downloadFile()">
              <vab-icon icon="download-cloud-line" />
              下载
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-panel>
    </vab-query-form>

    <el-table :data="tableData" ref="multipleTableRef" @current-change="handleTableCurrentChange" highlight-current-row
      v-loading="listLoading" stripe="true" size="small" border="true">
	  .....
    </el-table>
    <LandInfoEdit ref="editRef" @fetch-data="fetchData" />
    <el-pagination background :current-page="queryForm.pageNo" :layout="layout" :page-size="queryForm.pageSize"
      :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
  </div>
</template>
```

剑轩

vue3 Element Plus 表格使用， vue-admin-beautiful表格使用。Element UI Plus弹窗更新，el-pagination分页，表格上面按钮搜索框,搜索框放在一行加入选择框等。Vue模板

{{item.title}}