GisTable 示例代码 ``` vue <template> <Card> <gis-table ref="gisTable" :column="tableColumns" :searchRule="searchRule" height="400" v-on="listener" :buttons="buttons" :fetchName="fetchName" :config="config" v-model="data" /> </Card> </template> <script> export default { data () { return { // 接口名称 fetchName: "", // 配置信息 config: { // 是否可拖拽 draggable: false, // 斑马纹 stripe: true, // 显示分页 showPage: true, // 显示查询框 showSearch: true }, // 表格列配置 tableColumns: [ { type: 'expand', // 二级菜单 width: 50, render: (h, params) => { return h(this.$gisFuncTable(this.subColumns, `fetchName/${params.row.parma}`, { 'on-row-dblclick': (e, index) => { alert(index) } })) } }, { type: 'index', // 序号 width: 40, align: 'center' }, { title: '申请编号', // 列名 必填 key: 'slh', // 对应字段 必填 width: 150, // 默认宽度 选填 align: 'center', // 排布位置 选填 tooltip: true // 超出宽度以省略号显示，并用气泡提示 选填 }, { title: '用海面积', key: 'yhzmj', width: 130, align: 'right', format: '.000000' // 格式化 支持（1、数字eg .0000 2、经纬度 lat 3、日期 eg yyyy年MM月dd日） 选填 }, { title: '业务类型', key: 'ywlxMc', width: 250, dict: "ywlx" // 读字典 值为前端缓存的字典名称 选填 }, { title: '项目名称', key: 'xmmc', width: 250, tooltip: true }, // minWidth { title: '申请人', key: 'sqr', width: 150, align: 'center', tooltip: true }, { title: '项目位置', key: 'zl', minWidth: 250, tooltip: true }, { title: '批准日期', key: 'yhpzrq', width: 120, align: 'center', format: 'yyyy年MM月dd日' }, { title: '用海批准机关', key: 'yhpzjg', width: 180, align: 'center' } ], // 双向绑定，当前table的值 data: [], subColumns: [ { title: '海籍管理号', key: 'hjglh', align: 'center', width: 120 }, { title: '项目名称', key: 'xmmc', align: 'center', width: 200, render: (h, params) => { return h('span', { style: { color: '#4599eb', cursor: 'pointer' }, }, params.row.xmmc) } }, { title: '是否临时', key: 'sflsyh', width: 70, align: 'center', dict: 'sflsyh' }, { title: '项目性质', key: 'xmxz', width: 70, align: 'center', dict: 'xmxz' }, { title: '用海类型', key: 'yhlx', width: 180, align: 'center', render: (h, params) => { const yhlxa = params.row.yhlxa ? $dict('yhlxa').find(v => v.value === params.row.yhlxa).label : '' const yhlxb = params.row.yhlxb ? $dict('yhlxb').find(v => v.value === params.row.yhlxb).label : '' const text = `${yhlxa}(${yhlxb})` return h('span', text) } }, { title: '用海面积', key: 'zhmj', width: 100, align: 'right' }, { title: '使用金总额', key: 'syjze', width: 100, align: 'right' }, { title: '缴纳方式', key: 'syjjnfs', width: 80, align: 'center', dict: 'syjjnfs' }, { title: '宗海状态', key: 'zt', width: 70, align: 'center', // fixed: 'right', render: (h, params) => { return h('code', { class: Number(params.row.ywblZt) === 0 ? 'warning-color' : 'success-color' }, Number(params.row.ywblZt) === 0 ? '无效' : '有效') } } ], /** * gis-table的事件 * 1、按钮事件： `handleBtn${btn.key}` 首字母大写 * eg. 按钮 add 的事件名 => handleBtnAdd * 2、表格自带事件： `handleRow${evnetName}` * eg. 双击事件 => handleRowDbClick * */ listener: { handleBtnAdd: this.handleBtnAdd, handleBtnShow: this.handleBtnShow, handleBtnDraw: this.draw, handleBtnTag: this.tag }, // 右侧按钮 buttons: [ { key: 'add', title: '新增', icon: "md-add" }, { key: 'show', title: '查看', icon: "md-book" }, { key: 'draw', title: '抽屉', icon: "md-exit" }, { key: 'tag', title: '多标签', icon: "ios-pricetags-outline" }, { key: 'refresh', title: '刷新', icon: "md-refresh" }, ], // 查询条件 searchRule: [ { type: "input", title: "地块名称", field: "dkmc", }, { type: "select", title: "地表地下", field: "dbdx", options: [ { label: '地表', value: 1 }, { label: '地下', value: -1 } ] }, { type: "select", title: "用地用海", field: "ydyh", } ] } } } </script> <style> </style> ``` 效果图