vue-EasyUI表格自定义列

最新推荐文章于 2023-05-04 08:55:48 发布

坠入云幕间KN

最新推荐文章于 2023-05-04 08:55:48 发布

阅读量692

点赞数 2

分类专栏： Vue 文章标签： 1024程序员节 easyui vue 前端框架

本文链接：https://blog.csdn.net/qq_42341467/article/details/127486880

版权

Vue 专栏收录该内容

9 篇文章

订阅专栏

注意了是vue-EasyUI 不是Jquery版本

vue-EasyUI文档地址：https://www.jeasyui.cn/document/vue/index.html

效果贴图
效果图
代码

 <!--数据表格-->
        <DataGrid :data="data" :loading="isLoading"  loadMsg="数据加载中。。。">
          <!--多选框-->
          <GridColumn field="ck" :width="10" align="center">
            <template slot="header" slot-scope="scope">
              <CheckBox v-model="allChecked"  @checkedChange="onAllCheckedChange($event)" ></CheckBox>
            </template>
            <template slot="body" slot-scope="scope">
              <CheckBox v-model="scope.row.selected" @checkedChange="onCheckedChange($event)"></CheckBox>
            </template>
          </GridColumn>
          
          <GridColumn :field="item.field" :title="item.title" :index="index" v-for="(item,index) in column" :width="item.width" align="center"></GridColumn>

          <!--自定义列-->
          <GridColumn field="operation" title="操作" align="center" width="15">
            <template slot="cell" slot-scope="row,column,rowIndex">
              <LinkButton iconCls="icon-edit" @click="getRow(row.row)"  title="编辑数据">编辑</LinkButton>
            </template>
          </GridColumn>

        </DataGrid>