RuoYi框架,实现这个复制粘贴功能不要太好用

公司需求,点击某个单元格就复制下来这个单元格内容,使用传统的选中复制粘贴效率太低!

 上面的table表格,是公司高频使用且用户需要复制粘贴。

上代码:

    <el-table

                  :data="tableData"

                  style="width: 100%">

                  <el-table-column

                    prop="count"

                    label="Payment"

                    width="80">

                  </el-table-column>

                  <el-table-column

                    prop="startDate"

                    label="Period"

                    width="240">

                    <template slot-scope="scope">

                      <span v-if="scope.row.startDate"

                      v-clipboard:error="copyFailed"

                      v-clipboard:copy="scope.row.startDate+'-'+ scope.row.endDate"

                      v-clipboard:success="copySuccess" style="cursor:pointer;">

                      { {scope.row.startDate}}-{ {scope.row.endDate }} </span>

                    </template>

                  </el-table-column>

                  <el-table-column

                    prop="amount"

                    align="right"

                    label="Amount">

                    <template slot-scope="scope">

                      <span v-clipboard:copy="scope.row.amount"

                      v-clipboard:error="copyFailed"

                      v-clipboard:success="copySuccess"

                      style="cursor:pointer;">

                      { { scope.row.amount }}</span>

                    </template>

                  </el-table-column>

                  <el-table-column

                    width="120"

                    prop="dueDay"

                    label="Due Day">

                    <template slot-scope="scope">

                      <span v-clipboard:copy="scope.row.dueDay"

                      v-clipboard:error="copyFailed"

                      v-clipboard:success="copySuccess"

                      style="cursor:pointer;">

                      { { scope.row.dueDay }}</span>

                    </template>

                  </el-table-column>

                </el-table>

成功失败回调函数是统一提示:       注:写在methods函数里面

    copySuccess() {

      this.$modal.msgSuccess("复制成功");

    },

    copyFailed() {

      this.$modal.msg("复制失败");

    },

猜你喜欢

转载自blog.csdn.net/weixin_58658898/article/details/132362861
今日推荐