一个Vue Table 操作的完整示例

<!--页面代码-->

<template>

  <div>

    <t-card class="list-card-container" :bordered="false">

      <h2 style="margin-bottom: -25px;">系统公共参数</h2>

      <t-row justify="space-between" style="margin-left: 150px;">

        <div class="btn-grp-left">

          <div class="search-input">

            <t-input v-model="searchValue" placeholder="编号/名称" @change="onInput" clearable>

              <template #suffix-icon>

                <search-icon size="16px" />

              </template>

            </t-input>

          </div>&nbsp;

          <t-button theme="success" @click="btnDisAll">全部</t-button>

          <t-button theme="success" @click="btnRefresh">刷新</t-button>

          <t-button theme="success" @click="btnExport">导出</t-button>

        </div>

        <div class="btn-grp-right">

          <t-button @click="btnAddNew"> 新增</t-button>

        </div>

      </t-row>

      <t-table :row-key="rowKey" :data="data" :columns="cols" :bordered="true" :stripe="true" :size="tablesize"

        :table-layout="tablelayout" :pagination="pagination" :loading="dataLoading">

        <template #enabled="{ row }">

          <t-tag v-if="row.enabled === 0" theme="danger" variant="light">失效</t-tag>

          <t-tag v-if="row.enabled === 1" theme="success" variant="light">有效</t-tag>

        </template>

        <template #op="slotProps">

          <t-space>

            <t-link theme="primary" @click="handleClickEdit(slotProps)"> 编辑</t-link>

            <t-link theme="danger" @click="handleClickDelete(slotProps)"> 删除</t-link>

          </t-space>

        </template>

      </t-table>

    </t-card>

 

    <t-dialog theme="success" v-model:visible="add_confirmVisible" header="新增参数" :width="500" @confirm="add_onConfirm">

      <t-space direction="vertical" style="width: 95%">

        <div>

          <t-form>

            <t-form-item label="参数名称">

              <t-input placeholder="请输入内容" v-model="add_name" />

            </t-form-item>

            <t-form-item label="参数值">

              <t-input placeholder="请输入内容" v-model="add_value" />

            </t-form-item>

          </t-form>

        </div>

      </t-space>

    </t-dialog>

 

    <t-dialog theme="success" v-model:visible="edit_confirmVisible" header="编辑参数" :width="500" @confirm="edit_onConfirm">

      <t-space direction="vertical" style="width: 95%">

        <div>

          <t-form>

            <t-form-item label="参数名称">

              <t-input placeholder="请输入内容" v-model="datainfo.keyName" disabled />

            </t-form-item>

            <t-form-item label="参数值">

              <t-input placeholder="请输入内容" v-model="datainfo.keyValue" />

            </t-form-item>

            <t-form-item label="描述">

              <t-input placeholder="请输入内容" v-model="datainfo.note" />

            </t-form-item>

            <t-form-item label="使用状态">

              <t-radio-group v-model="datainfo.enabled">

                <t-radio value='1'>有效</t-radio>

                <t-radio value='0'>失效</t-radio>

              </t-radio-group>

            </t-form-item>

            <t-form-item label="排序码">

              <t-input placeholder="请输入内容" v-model="datainfo.sortNum" />

            </t-form-item>

          </t-form>

        </div>

      </t-space>

    </t-dialog>

    <t-dialog theme="warning" v-model:visible="del_confirmVisible" header="确认删除当前所选的数据吗？" :on-cancel="del_onCancel"

      @confirm="del_onConfirm">

      <p>参数名称{{ del_name }}</p>

      <p>参数值{{ del_value }}</p>

    </t-dialog>

  </div>

</template>

 

<script setup lang="ts">

import { onActivated, reactive, toRefs } from 'vue';

import { Data, Input, MessagePlugin, PrimaryTableCol, TableRowData } from 'tdesign-vue-next';

import { SearchIcon } from 'tdesign-icons-vue-next';

import { computed, onMounted, ref } from 'vue';

import { useRouter } from 'vue-router';

 

//表示 @api 指的是"src/api"路径

import { exportExcel } from "@/utils/exceltool";

import { addsysPublicValue, deletesysPublicValue, editsysPublicValue, getsysPublicValueList } from '@/api/tcm_system';

 

//加载数据

onMounted(() => {

  fetchData();

});

 

///获取数据

const fetchData = async () => {

  dataLoading.value = true;

  try {

    const { list } = await getsysPublicValueList();

    data.value = list;

    data_alllist.value = list;

    pagination.value = {

      ...pagination.value,

      total: list.length,

    };

  } catch (e) {

    console.log(e);

  } finally {

    dataLoading.value = false;

  }

};

 

//定义数据

const data = ref([]); //用于列表展示

const data_alllist = ref([]);  //用于后台查询后保存完整数据

//定义分页

const pagination = ref({

  defaultPageSize: 15,

  total: 0,

  defaultCurrent: 1,

});

const dataLoading = ref(false);

//定义表格的列 title变更为表格列的名称   multiple   single

const rowKey = 'id';

const tablesize = 'small';

const tablelayout = 'auto';

const cols: PrimaryTableCol<TableRowData>[] = [

  { title: '序号', colKey: 'serial-number', align: 'center', fixed: 'left', width: 60, },

  { title: '参数名称', colKey: 'keyName', align: 'left', fixed: 'left', },

  { title: '参数值', colKey: 'keyValue', align: 'left', fixed: 'left', },

  { title: '参数描述', colKey: 'note', align: 'left', fixed: 'left', },

  { title: '启用', colKey: 'enabled', align: 'left', fixed: 'left', },

  { title: '排序码', colKey: 'sortNum', align: 'left', fixed: 'left', },

  { title: '操作', colKey: 'op', align: 'left', fixed: 'left', },

];

前台查询

//查询输入框--前台执行查询操作    

const searchValue = ref('');

const onInput = () => {

  //首先恢复全部数据

  data.value = data_alllist.value;

  //查询数据

  let serkey = searchValue.value;

  let searchData = data.value;

  //多关键字查询

  searchData = searchData.filter(item => item.KeyName.match(serkey) || item.keyValue.match(serkey)

  );

  // 计算分页和条数

  pagination.value = {

    ...pagination.value,

    total: searchData.length,

  };

  //重新加载数据

  data.value = searchData;

};

 

//显示全部

const btnDisAll = () => {

  searchValue.value = "";

  fetchData();

};

//刷新

const btnRefresh = () => {

  searchValue.value = "";

  fetchData();

};

//导出

const btnExport = () => {

  const titleObj = {

    ID: "id",

    参数名称: "keyName",

    参数值: "keyValue",

    参数描述: "note",

    启用: "enabled",

    排序码: "sortNum",

  };

  exportExcel(data.value, '系统公共参数列表', titleObj, "Sheet1");

};

 

//新增

//变量

const add_confirmVisible = ref(false);

const add_name = ref('');

const add_value = ref('');

//页面新增按钮

const btnAddNew = () => {

  add_confirmVisible.value = true;  //打开新增对话框

};

//提交确认保存

const add_onConfirm = async () => {

  try {

    const obj = reactive({

      KeyName: add_name.value,

      KeyValue: add_value.value

    });

    //提交

    const res = await addsysPublicValue(obj);

    console.log('res', res);

    if (res.data.code === 0) {

      fetchData();

      MessagePlugin.success('新增成功');

    }

    else {

      MessagePlugin.error('新增失败-' + res.data.message);

    }

  } catch (e) {

    console.log(e);

  }

  add_confirmVisible.value = false;

};

 

//编辑

//定义

const edit_confirmVisible = ref(false);

const datainfo = reactive({

  id: '',

  keyName: '',

  keyValue: '',

  note: '',

  enabled: '',

  sortNum: '',

});

//行编辑按钮

const handleClickEdit = async (row: { rowIndex: any, row: any }) => {

  edit_confirmVisible.value = true;  //打开编辑对话框

  //获取数据两种方案（1）直接获取行上的数据  （2）调取接口获取完整数据

  datainfo.id = row.row.id;

  datainfo.keyName = row.row.keyName;

  datainfo.keyValue = row.row.keyValue;

  datainfo.note = row.row.note;

  datainfo.enabled = row.row.enabled.toString();

  datainfo.sortNum = row.row.sortNum;

};

//提交保存

const edit_onConfirm = async () => {

  try {

    const res = await editsysPublicValue(datainfo);

    if (res.data.code === 0) {

      fetchData();

      MessagePlugin.success('保存成功');

    }

    else {

      MessagePlugin.success('保存失败-' + res.data.message);

    }

  } catch (e) {

    console.log(e);

  }

  edit_confirmVisible.value = false;

};

 

//删除

//变量

const del_confirmVisible = ref(false);

const del_index = ref(-1);

const del_id = ref('');

const del_name = ref('');

const del_value = ref('');

//打开删除对话框

const handleClickDelete = (row: { rowIndex: any }) => {

  del_index.value = row.rowIndex;

  del_id.value = data.value[row.rowIndex].id;

  del_name.value = data.value[row.rowIndex].keyName;

  del_value.value = data.value[row.rowIndex].keyValue;

  del_confirmVisible.value = true;

};

//提交

const del_onConfirm = async () => {

  const res = await deletesysPublicValue(del_id.value);

  if (res.data.code === 0) {

    fetchData();

    MessagePlugin.success('删除成功');

  }

  else {

    MessagePlugin.success('删除失败-' + res.data.message);

  }

  del_confirmVisible.value = false;

  resetId();

};

//取消删除

const del_onCancel = () => {

  resetId();

};

const resetId = () => {

  del_index.value = -1;

  del_name.value = '';

  del_value.value = '';

};

 

</script>