Vue 动态表格 和 插入自定义表头

28 篇文章 0 订阅

直接上代码

<el-table
        :data="templateData"
        style="width: 100%;" stripe
        ref="templateTable"
        :empty-text="$t('basic.noData')" @filter-change="filterTable"
        @sort-change="sortData">
    <template v-for="(item, index) in tableHeaders">
        <el-table-column v-if='item.prop == "per"' :key='index' :label='item.label' :prop='item.prop' :width="item.width" sortable>
            <template slot-scope="scope">
                <el-progress class="NewCMMonitorPro" :text-inside="true" :percentage="70" :width="scope.row.width"></el-progress>
            </template>
        </el-table-column>
        <el-table-column v-else-if='item.prop == "Actions"' :key='index' :label='item.label' :prop='item.prop' :width="item.width" sortable>
            <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleEdit(scope.row)" style="color: #1E90FF;font-size: 14px;">
                    <i class="el-icon-notebook-2" style="font-size: 15px;" title="More"></i>
                    <!--More-->
                </el-button>
                <el-button size="mini" type="text" plain @click="handleDelete(scope.row)" style="color: #1E90FF;font-size: 14px;">
                    <i class="el-icon-delete" style="font-size: 15px;" title="Delete"></i>
                    <!--Delete-->
                </el-button>
            </template>
        </el-table-column>
        <el-table-column
                v-else
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :column-key="item.prop"
                :min-width="item.minWidth"
                :width="item.width"
                show-overflow-tooltip sortable>
        </el-table-column>
    </template>
    <!-- 过滤 -->
    <el-table-column width="40" align="center" :filters="filters" filter-placement="bottom"
                     column-key="filter">
        <template slot="header">
            <el-popover placement="left" trigger="hover" content="FILTER" :visible-arrow="false">
                <i slot="reference" class="el-icon-setting" style="cursor: pointer;"></i>
            </el-popover>
        </template>
    </el-table-column>
</el-table>
// 表格数据
templateData: [],
// 表格遍历
tableHeaders: [
    { label: 'Description', prop: 'Des', width: 'auto', minWidth: 150 },
    { label: 'Create Time', prop: 'CreateTime', width: 'auto'},
    { label: 'End Time', prop: 'FinishedTime', width: 'auto'},
    { label: 'Creator', prop: 'CreateUser', width: 'auto'},
    { label: 'Progress', prop: 'per', width: 'auto'},
    { label: 'Actions', prop: 'Actions', width: '80'}
],
// 过滤表格
filters: [
    { text: 'Description', value: 'Des'},
    { text: 'Create Time', value: 'CreateTime'},
    { text: 'End Time', value: 'FinishedTime'},
    { text: 'Creator', value: 'CreateUser'},
    { text: 'Progress', value: 'per'},
    { text: 'Actions', value: 'Actions'},
]

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ant Design Vue 2 的 `Table` 组件本身并不支持表格行拖拽的功能,但可以通过自定义实现来实现该功能。 以下是一个简单的实现思路: 1. 在 `Table` 组件中添加一个 `draggingRowIndex` 属性,用于保存当前正在被拖拽的行的索引。 2. 在 `Table` 组件中添加 `handleMouseDown` 方法,用于在鼠标按下时设置 `draggingRowIndex` 属性。 3. 在 `Table` 组件中添加 `handleMouseMove` 方法,用于在鼠标移动时根据当前鼠标位置计算出被拖拽的行应该被插入到哪个位置,并更新数据源。 4. 在 `Table` 组件中添加 `handleMouseUp` 方法,用于在鼠标抬起时清除 `draggingRowIndex` 属性。 在实现拖拽功能时,你需要注意以下几点: 1. 拖拽的行不能是表头。 2. 拖拽的行不能是合并单元格的一部分。 3. 拖拽的行不能是被禁用的行。 4. 拖拽的行不能是被选中的行。 5. 拖拽的行不能拖拽到表格之外。 以下是一个简单的实现示例: ```vue <template> <a-table :columns="columns" :dataSource="dataSource" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"> <template #name="text"> <span v-if="text.dataIndex === 'name'" :class="{ dragging: text.index === draggingRowIndex }">{{ text.text }}</span> <span v-else>{{ text.text }}</span> </template> </a-table> </template> <script> export default { data() { return { draggingRowIndex: -1, // 当前正在被拖拽的行的索引 dataSource: [ { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' }, { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' }, { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' }, ], columns: [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age' }, { title: 'Address', dataIndex: 'address', key: 'address' }, ], }; }, methods: { handleMouseDown(event, row) { // 如果不是左键点击或者拖拽的行不能被拖拽,则返回 if (event.button !== 0 || !this.canDragRow(row)) { return; } this.draggingRowIndex = row.index; }, handleMouseMove(event, row) { // 如果没有拖拽行或者拖拽的行不能被拖拽,则返回 if (this.draggingRowIndex === -1 || !this.canDragRow(row)) { return; } const draggingRow = this.dataSource[this.draggingRowIndex]; const overRowIndex = row.index; // 如果拖拽行和悬停行相同,则返回 if (this.draggingRowIndex === overRowIndex) { return; } // 将拖拽行从数据源中删除 this.dataSource.splice(this.draggingRowIndex, 1); // 计算拖拽行应该被插入的位置 const insertIndex = overRowIndex > this.draggingRowIndex ? overRowIndex - 1 : overRowIndex; // 将拖拽行插入到数据源中 this.dataSource.splice(insertIndex, 0, draggingRow); // 更新当前拖拽行的索引 this.draggingRowIndex = insertIndex; }, handleMouseUp() { // 清除当前拖拽行的索引 this.draggingRowIndex = -1; }, canDragRow(row) { // 表头、合并单元格的单元格、禁用的行、选中的行不能被拖拽 return !row.header && !row.cells.some((cell) => cell.rowSpan > 1 || cell.colSpan > 1) && !row.disabled && !row.selected; }, }, }; </script> <style scoped> .dragging { opacity: 0.5; } </style> ``` 在示例中,我们利用 `mousedown`、`mousemove` 和 `mouseup` 事件来实现表格行拖拽功能。在 `handleMouseDown` 方法中,我们记录下当前拖拽的行的索引;在 `handleMouseMove` 方法中,我们根据当前鼠标位置计算出拖拽行应该被插入的位置,并更新数据源;在 `handleMouseUp` 方法中,我们清除当前拖拽行的索引。同时,我们还添加了一个 `canDragRow` 方法,用于判断某一行是否可以被拖拽。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值